diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index c069b2f89..9466da6a0 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -9,7 +9,7 @@
 
 ## Checklist
 
-- [ ] Code follows project style (no comments, named imports)
+- [ ] Code follows project style (doc comments only, named imports)
 - [ ] TypeScript types are properly defined
 - [ ] Tests added/updated (80% coverage target)
 - [ ] `pnpm lint` passes locally
diff --git a/AGENTS.md b/AGENTS.md
index aae1d66fb..ada7271d0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -17,7 +17,7 @@
 
 ## Code Style
 
-- No comments, self-documenting code only
+- Doc comments only in new and changed code: JSDoc/TSDoc attached to the declaration they document, in the language's native doc convention. No inline, explanatory, or section comments; code must be self-documenting
 - No console logs (use Bun's logger or proper error handling)
 - Strict TypeScript everywhere, proper typing required
 - Named imports only: `import { Hono } from 'hono'`, `import { useState } from 'react'`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 492335c7d..018b2e90e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -49,7 +49,7 @@ Each item is tagged with a theme to help you find work in your area of interest:
 
 ### Code Style
 
-- Self-documenting code (no comments needed)
+- New and changed code uses doc comments only (JSDoc/TSDoc on the declaration they document); no inline or explanatory comments
 - Strict TypeScript with proper typing
 - Named imports only
 - DRY principles - check for existing patterns before adding new ones
diff --git a/backend/src/services/opencode-event-routing.ts b/backend/src/services/opencode-event-routing.ts
index 877e2b949..bed6f3d70 100644
--- a/backend/src/services/opencode-event-routing.ts
+++ b/backend/src/services/opencode-event-routing.ts
@@ -52,6 +52,33 @@ export function planSessionStatusReplay(
   return { idle, busy }
 }
 
+/**
+ * Records the activity state an event implies for its session, so that directory-scoped work can be
+ * limited to the sessions that are actually running.
+ *
+ * @param busySessions Sessions currently running on the server, updated in place.
+ * @param event Event observed on the server stream.
+ */
+export function applySessionActivity(busySessions: Set<string>, event: V2Event): void {
+  switch (event.type) {
+    case 'session.status': {
+      const { sessionID, status } = event.data
+      if (status.type === 'idle') busySessions.delete(sessionID)
+      else busySessions.add(sessionID)
+      return
+    }
+    case 'session.execution.started':
+      busySessions.add(event.data.sessionID)
+      return
+    case 'session.idle':
+    case 'session.execution.succeeded':
+    case 'session.execution.failed':
+    case 'session.execution.interrupted':
+    case 'session.deleted':
+      busySessions.delete(event.data.sessionID)
+  }
+}
+
 export function createReplayEventBuilder(idPrefix: string): ReplayEventBuilder {
   let count = 0
   return (type, directory, data) => {
diff --git a/backend/src/services/remote-server-events.ts b/backend/src/services/remote-server-events.ts
index 91dc01e3b..c81fbcf7c 100644
--- a/backend/src/services/remote-server-events.ts
+++ b/backend/src/services/remote-server-events.ts
@@ -14,6 +14,7 @@ import type {
   OpenCodeServerRegistry,
 } from './opencode-server-registry'
 import {
+  applySessionActivity,
   collectPendingReplayEvents,
   createAuthorizedEventSourceInit,
   createReplayEventBuilder,
@@ -63,6 +64,7 @@ interface RemoteServerStream {
   versionRequested: boolean
   versionProbeToken: number
   sessionDirectories: Map<string, string>
+  busySessions: Set<string>
   subagentSessions: Set<string>
 }
 
@@ -152,6 +154,9 @@ export class RemoteServerEventHub {
     const key = buildServerDirectoryKey(serverId, directory)
     if (!this.aggregator.hasClientDirectory(clientId, key)) return
 
+    const stream = this.streams.get(serverId)
+    if (!stream || !this.hasActiveSession(stream, directory)) return
+
     let api: OpenCodeApi
     try {
       api = this.registry.getClient(serverId).api
@@ -172,6 +177,13 @@ export class RemoteServerEventHub {
     this.emitReplayEventsToClient(clientId, serverId, directory, events.forms)
   }
 
+  private hasActiveSession(stream: RemoteServerStream, directory: string): boolean {
+    for (const sessionID of stream.busySessions) {
+      if (stream.sessionDirectories.get(sessionID) === directory) return true
+    }
+    return false
+  }
+
   private emitReplayEventsToClient(
     clientId: string,
     serverId: string,
@@ -281,6 +293,7 @@ export class RemoteServerEventHub {
     try {
       const { event, resolvedDirectory, payloadJson } = routed
       const sessionID = sessionIDFromEvent(event)
+      if (sessionID) applySessionActivity(stream.busySessions, event)
       if (sessionID && event.type === 'session.deleted') {
         stream.subagentSessions.delete(sessionID)
       } else if (event.type === 'session.created' && event.data.parentID) {
@@ -352,12 +365,16 @@ export class RemoteServerEventHub {
 
     if (!this.isStreamCurrent(serverId, stream, source)) return
 
+    await this.resolveActiveSessionDirectories(api, serverId, stream, Object.keys(active ?? {}))
+    if (!this.isStreamCurrent(serverId, stream, source)) return
+
     const plan = planSessionStatusReplay(active, stream.sessionDirectories)
     let replayed = 0
 
     for (const { sessionID, directory } of plan.idle) {
       const event = this.buildReplayEvent('session.status', directory, { sessionID, status: { type: 'idle' } })
       this.aggregator.deliverRemoteEnvelope(serverId, directory, JSON.stringify(event))
+      stream.busySessions.delete(sessionID)
       replayed++
     }
 
@@ -365,6 +382,7 @@ export class RemoteServerEventHub {
       const directory = stream.sessionDirectories.get(sessionID) ?? null
       const event = this.buildReplayEvent('session.status', directory ?? '', { sessionID, status: { type: 'busy' } })
       this.aggregator.deliverRemoteEnvelope(serverId, directory, JSON.stringify(event))
+      stream.busySessions.add(sessionID)
       replayed++
     }
 
@@ -373,6 +391,26 @@ export class RemoteServerEventHub {
     }
   }
 
+  private async resolveActiveSessionDirectories(
+    api: OpenCodeApi,
+    serverId: string,
+    stream: RemoteServerStream,
+    sessionIDs: string[],
+  ): Promise<void> {
+    const unresolved = sessionIDs.filter((sessionID) => !stream.sessionDirectories.has(sessionID))
+    if (unresolved.length === 0) return
+
+    await Promise.allSettled(unresolved.map(async (sessionID) => {
+      try {
+        const session = await api.session.get({ sessionID })
+        const directory = session.location.directory
+        if (directory) stream.sessionDirectories.set(sessionID, directory)
+      } catch (error) {
+        logger.warn(`remote status replay: failed to resolve the directory of ${sessionID} on ${serverId}: ${String(error)}`)
+      }
+    }))
+  }
+
   private async refreshVersion(serverId: string): Promise<void> {
     const stream = this.streams.get(serverId)
     if (!stream || stream.versionRequested) return
@@ -413,6 +451,7 @@ export class RemoteServerEventHub {
       versionRequested: false,
       versionProbeToken: 0,
       sessionDirectories: new Map(),
+      busySessions: new Set(),
       subagentSessions: new Set(),
     }
     this.streams.set(serverId, stream)
diff --git a/backend/src/services/repo.ts b/backend/src/services/repo.ts
index ed36f9c55..d409604e8 100644
--- a/backend/src/services/repo.ts
+++ b/backend/src/services/repo.ts
@@ -37,6 +37,9 @@ export class RepoInputError extends Error {
   }
 }
 
+const HTTP_AUTH_STATUS_PATTERN = /\b(?:http|status|error):?\s+401\b/
+const HTTP_NOT_FOUND_STATUS_PATTERN = /\b(?:http|status|error):?\s+404\b/
+
 function notFoundOrDeniedMessage(repoUrl: string): string {
   return `Repository not found or access denied: ${repoUrl}. Check the URL and add credentials in Settings > Git Credentials if it is private.`
 }
@@ -52,7 +55,26 @@ function enhanceCloneError(repoUrl: string, originalMessage: string): RepoInputE
     return new RepoInputError(`Repository not reachable: ${repoUrl}. Check the URL and your network connection.`)
   }
 
-  if (message.includes('repository not found') || message.includes('not found') || message.includes('does not exist') || message.includes('404')) {
+  if (
+    message.includes('authentication failed') ||
+    message.includes('could not authenticate') ||
+    message.includes('invalid credentials') ||
+    message.includes('invalid username or password') ||
+    message.includes('could not read username') ||
+    message.includes('could not read password') ||
+    HTTP_AUTH_STATUS_PATTERN.test(message)
+  ) {
+    return isGitHubHttpsUrl(repoUrl)
+      ? new RepoInputError(notFoundOrDeniedMessage(repoUrl))
+      : new RepoInputError(`Authentication failed for ${repoUrl}. Check your credentials in Settings > Git Credentials.`)
+  }
+
+  if (
+    message.includes('repository not found') ||
+    message.includes('not found') ||
+    message.includes('does not exist') ||
+    HTTP_NOT_FOUND_STATUS_PATTERN.test(message)
+  ) {
     return new RepoInputError(notFoundOrDeniedMessage(repoUrl))
   }
 
@@ -62,12 +84,6 @@ function enhanceCloneError(repoUrl: string, originalMessage: string): RepoInputE
       : new RepoInputError(notFoundOrDeniedMessage(repoUrl))
   }
 
-  if (message.includes('authentication failed') || message.includes('could not authenticate') || message.includes('invalid credentials') || message.includes('could not read username')) {
-    return isGitHubHttpsUrl(repoUrl)
-      ? new RepoInputError(notFoundOrDeniedMessage(repoUrl))
-      : new RepoInputError(`Authentication failed for ${repoUrl}. Check your credentials in Settings > Git Credentials.`)
-  }
-
   if (message.includes('not a git repository') || message.includes('fatal:')) {
     return new RepoInputError(notFoundOrDeniedMessage(repoUrl))
   }
diff --git a/backend/test/services/opencode-single-server.test.ts b/backend/test/services/opencode-single-server.test.ts
index 7aa36fec2..d09288fc2 100644
--- a/backend/test/services/opencode-single-server.test.ts
+++ b/backend/test/services/opencode-single-server.test.ts
@@ -17,6 +17,15 @@ const spawnMock = vi.hoisted(() => vi.fn(() => ({
 
 const spawnSyncMock = vi.hoisted(() => vi.fn())
 
+const processKillMock = vi.hoisted(() => vi.fn((_pid: number, signal?: number | NodeJS.Signals) => {
+  if (signal === 0) {
+    const error = new Error('kill ESRCH') as NodeJS.ErrnoException
+    error.code = 'ESRCH'
+    throw error
+  }
+  return true
+}))
+
 const readFileSyncMock = vi.hoisted(() => vi.fn())
 
 vi.mock('bun:sqlite', () => ({
@@ -186,6 +195,16 @@ const routeVersionProbeThroughExecSyncStub = () => {
 
 beforeEach(routeVersionProbeThroughExecSyncStub)
 
+const originalProcessKill = process.kill
+
+beforeEach(() => {
+  process.kill = processKillMock as unknown as typeof process.kill
+})
+
+afterEach(() => {
+  process.kill = originalProcessKill
+})
+
 // Reset singleton before any tests run to clear any polluted state from previous test files
 beforeAll(async () => {
   const { OpenCodeServerManager } = await import('../../src/services/opencode-single-server')
@@ -2823,6 +2842,7 @@ describe('OpenCodeServerManager - server auth', () => {
       await manager.start()
       await manager.stop()
 
+      expect(processKillMock).toHaveBeenCalledWith(1234, 'SIGTERM')
       const rmMock = fs.rm as unknown as ReturnType<typeof vi.fn>
       expect(rmMock).toHaveBeenCalledWith('/test/workspace/.opencode/state/opencode-server-child.json', { force: true })
     } finally {
@@ -2869,6 +2889,7 @@ describe('OpenCodeServerManager - server auth', () => {
       await secondManager.start()
 
       expect(spawnMock).toHaveBeenCalledTimes(2)
+      expect(processKillMock).toHaveBeenCalledWith(1234, 'SIGKILL')
     } finally {
       readFileMock.mockReset()
       Object.defineProperty(ENV.SERVER, 'NODE_ENV', { value: originalNodeEnv, configurable: true, writable: true })
diff --git a/backend/test/services/remote-server-events.test.ts b/backend/test/services/remote-server-events.test.ts
index cfe464484..97248a439 100644
--- a/backend/test/services/remote-server-events.test.ts
+++ b/backend/test/services/remote-server-events.test.ts
@@ -104,6 +104,7 @@ interface ApiFixture {
   permissions?: Record<string, unknown[]>
   forms?: Record<string, unknown[]>
   active?: Record<string, { type: 'running' }>
+  sessionDirectories?: Record<string, string>
 }
 
 function makeApi(fixture: ApiFixture = {}): OpenCodeApi {
@@ -126,6 +127,9 @@ function makeApi(fixture: ApiFixture = {}): OpenCodeApi {
     },
     session: {
       active: vi.fn(async () => fixture.active ?? {}),
+      get: vi.fn(async (input: { sessionID: string }) => ({
+        location: { directory: fixture.sessionDirectories?.[input.sessionID] ?? '' },
+      })),
     },
   } as unknown as OpenCodeApi
 }
@@ -779,8 +783,13 @@ describe('RemoteServerEventHub pending action replay', () => {
     sseAggregator.shutdown()
   })
 
+  function trackSessionStatus(sessionID: string, directory: string, status: string): void {
+    sources.sources[0]!.message(remoteEvent('session.status', { sessionID, status: { type: status } }, directory))
+  }
+
   it('replays pending remote actions to the subscribing client only', async () => {
     hub.start()
+    trackSessionStatus('ses-1', '/repo', 'busy')
     const client = createCapturingClient()
     const other = createCapturingClient()
     sseAggregator.addClient('replay-a', client.callback, client.writeFrame, ['srv_a|/repo'])
@@ -802,11 +811,57 @@ describe('RemoteServerEventHub pending action replay', () => {
     expect(other.frames).toHaveLength(0)
   })
 
+  it('skips the replay for a linked directory with no active session', async () => {
+    hub.start()
+    const client = createCapturingClient()
+    sseAggregator.addClient('idle', client.callback, client.writeFrame, ['srv_a|/repo'])
+
+    await flushPromises()
+
+    expect(fake.api.permission.request.list).not.toHaveBeenCalled()
+    expect(fake.api.form.list).not.toHaveBeenCalled()
+    expect(client.frames).toHaveLength(0)
+  })
+
+  it('stops replaying for a linked directory once its session goes idle', async () => {
+    hub.start()
+    trackSessionStatus('ses-1', '/repo', 'busy')
+    trackSessionStatus('ses-1', '/repo', 'idle')
+    const client = createCapturingClient()
+    sseAggregator.addClient('settled', client.callback, client.writeFrame, ['srv_a|/repo'])
+
+    await flushPromises()
+
+    expect(fake.api.permission.request.list).not.toHaveBeenCalled()
+    expect(client.frames).toHaveLength(0)
+  })
+
+  it('resolves the directory of an active session before gating the replay', async () => {
+    fake = createRegistry([SERVER_A], {
+      active: { 'ses-1': { type: 'running' } },
+      sessionDirectories: { 'ses-1': '/repo' },
+      permissions: { '/repo': [{ id: 'perm-1', sessionID: 'ses-1', action: 'shell', resources: ['ls'] }] },
+    })
+    hub = new RemoteServerEventHub(fake.registry, sseAggregator, { eventSourceFactory: sources.factory })
+    hub.start()
+    sources.sources[0]!.open()
+    await flushPromises()
+
+    const client = createCapturingClient()
+    sseAggregator.addClient('resolved', client.callback, client.writeFrame, ['srv_a|/repo'])
+    await flushPromises()
+
+    expect(fake.api.session.get).toHaveBeenCalledWith({ sessionID: 'ses-1' })
+    expect(fake.api.permission.request.list).toHaveBeenCalledWith({ location: { directory: '/repo' } })
+    expect(client.frames.map(parseFrame).map(frame => frame.payload.type)).toEqual(['permission.asked'])
+  })
+
   it('does not use the local pending action fetcher for remote keys', async () => {
     const localApi = makeApi({ permissions: { '/repo': [{ id: 'local-perm' }] } })
     sseAggregator.setPendingActionsFetcher({ api: localApi })
 
     hub.start()
+    trackSessionStatus('ses-1', '/repo', 'busy')
     const client = createCapturingClient()
     sseAggregator.addClient('mixed', client.callback, client.writeFrame, ['/repo', 'srv_a|/repo'])
 
@@ -820,6 +875,7 @@ describe('RemoteServerEventHub pending action replay', () => {
 
   it('replays remote actions when a client subscribes later', async () => {
     hub.start()
+    trackSessionStatus('ses-1', '/repo', 'busy')
     const client = createCapturingClient()
     sseAggregator.addClient('late', client.callback, client.writeFrame, [])
 
@@ -838,6 +894,7 @@ describe('RemoteServerEventHub pending action replay', () => {
     vi.mocked(fake.api.form.list).mockResolvedValue({ location: { directory: '/repo' }, data: [] })
 
     hub.start()
+    trackSessionStatus('ses-1', '/repo', 'busy')
     const client = createCapturingClient()
     sseAggregator.addClient('unsubscribed', client.callback, client.writeFrame, ['srv_a|/repo'])
     sseAggregator.removeDirectories('unsubscribed', ['srv_a|/repo'])
diff --git a/backend/test/services/repo-git.test.ts b/backend/test/services/repo-git.test.ts
index 5948bad60..93f154dee 100644
--- a/backend/test/services/repo-git.test.ts
+++ b/backend/test/services/repo-git.test.ts
@@ -88,6 +88,14 @@ describe('repo service real git', () => {
     })
   }
 
+  function createTlsCloneGitAuth(): GitAuthService {
+    return createGitAuthService({
+      GIT_TERMINAL_PROMPT: '0',
+      GIT_CONFIG_NOSYSTEM: '1',
+      GIT_CONFIG_GLOBAL: '/dev/null',
+    })
+  }
+
   describe('initLocalRepo', () => {
     it('initializes a relative repo and marks it ready', async () => {
       const { initLocalRepo } = await import('../../src/services/repo')
@@ -756,7 +764,7 @@ describe('repo service real git', () => {
         const url = `https://127.0.0.1:${port}/404/repo-missing.git`
         process.env.GIT_SSL_NO_VERIFY = 'true'
         try {
-          await expect(cloneRepo(db, gitAuth, url, { directoryName: name })).rejects.toThrow(/Repository not found/)
+          await expect(cloneRepo(db, createTlsCloneGitAuth(), url, { directoryName: name })).rejects.toThrow(/Repository not found/)
         } finally {
           delete process.env.GIT_SSL_NO_VERIFY
         }
@@ -773,7 +781,24 @@ describe('repo service real git', () => {
         const url = `https://user:pass@127.0.0.1:${port}/repo-auth.git`
         process.env.GIT_SSL_NO_VERIFY = 'true'
         try {
-          await expect(cloneRepo(db, gitAuth, url, { directoryName: name })).rejects.toThrow(/Authentication failed/)
+          await expect(cloneRepo(db, createTlsCloneGitAuth(), url, { directoryName: name })).rejects.toThrow(/Authentication failed/)
+        } finally {
+          delete process.env.GIT_SSL_NO_VERIFY
+        }
+      })
+
+      expect(getRepoByLocalPath(db, name)).toBeNull()
+    })
+
+    it('maps an authentication clone failure whose URL contains a 404 sequence', async () => {
+      const { cloneRepo } = await import('../../src/services/repo')
+      const name = uniqueName('clone-auth-404')
+
+      await withTlsServer(401, async (port) => {
+        const url = `https://user:pass@127.0.0.1:${port}/404/repo-auth.git`
+        process.env.GIT_SSL_NO_VERIFY = 'true'
+        try {
+          await expect(cloneRepo(db, createTlsCloneGitAuth(), url, { directoryName: name })).rejects.toThrow(/Authentication failed/)
         } finally {
           delete process.env.GIT_SSL_NO_VERIFY
         }
diff --git a/frontend/src/api/opencode.test.ts b/frontend/src/api/opencode.test.ts
index 03ec96c13..a75180a54 100644
--- a/frontend/src/api/opencode.test.ts
+++ b/frontend/src/api/opencode.test.ts
@@ -12,6 +12,7 @@ import {
   createSessionWithPrompt,
   deleteSession,
   findFiles,
+  findRemoteProjectForDirectory,
   forkSession,
   getSession,
   interruptSession,
@@ -20,13 +21,16 @@ import {
   listPendingPermissions,
   listSessionMessages,
   listSessionPage,
+  rankProjectsBySessionActivity,
   readSessionSnapshot,
+  remoteProjectName,
   renameSession,
   replyForm,
   replyPermission,
   runCommand,
   runShell,
   sendPrompt,
+  sortProjectsByUpdatedAt,
   stageRevert,
   switchSessionAgent,
   switchSessionModel,
@@ -753,3 +757,134 @@ describe('OpenCode facade', () => {
     expect(lastRequest().init.method).toBe('DELETE')
   })
 })
+
+const project = (
+  id: string,
+  name: string | undefined,
+  canonical: string,
+  time: { created: number; updated: number; active?: number },
+) => ({ id, name, canonical, time, sandboxes: [] })
+
+const session = (id: string, directory: string, updated: number) => ({
+  id,
+  projectID: 'prj',
+  cost: 0,
+  tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+  time: { created: updated - 1000, updated },
+  location: { directory },
+})
+
+describe('project helpers', () => {
+  it('orders projects by their update time, most recent first, without mutating the input', () => {
+    const stale = project('p_stale', 'Stale', '/work/stale', { created: 1, updated: 100 })
+    const recent = project('p_recent', 'Recent', '/work/recent', { created: 1, updated: 900 })
+    const middle = project('p_middle', 'Middle', '/work/middle', { created: 1, updated: 700 })
+    const projects = [stale, recent, middle]
+
+    expect(sortProjectsByUpdatedAt(projects).map((entry) => entry.id)).toEqual([
+      'p_recent',
+      'p_middle',
+      'p_stale',
+    ])
+    expect(projects.map((entry) => entry.id)).toEqual(['p_stale', 'p_recent', 'p_middle'])
+  })
+
+  it('labels a project with its newest session time and ignores the project activity time', () => {
+    const projects = [project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 10, active: 900 })]
+
+    const [entry] = rankProjectsBySessionActivity(projects, [
+      session('ses_old', '/work/alpha', 300),
+      session('ses_new', '/work/alpha', 500),
+    ])
+
+    expect(entry.project.id).toBe('p1')
+    expect(entry.activityAt).toBe(500)
+  })
+
+  it('credits a session in a nested directory to the project that owns it', () => {
+    const projects = [project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 10 })]
+
+    const [entry] = rankProjectsBySessionActivity(projects, [
+      session('ses_nested', '/work/alpha/packages/web', 400),
+    ])
+
+    expect(entry.activityAt).toBe(400)
+  })
+
+  it('orders session-backed projects first, then the rest by update time', () => {
+    const projects = [
+      project('p_idle', 'Idle', '/work/idle', { created: 1, updated: 950, active: 999 }),
+      project('p_worked', 'Worked', '/work/worked', { created: 1, updated: 20, active: 999 }),
+      project('p_quiet', 'Quiet', '/work/quiet', { created: 1, updated: 600 }),
+    ]
+
+    const ranked = rankProjectsBySessionActivity(projects, [session('ses_1', '/work/worked', 300)])
+
+    expect(ranked.map((entry) => entry.project.id)).toEqual(['p_worked', 'p_idle', 'p_quiet'])
+    expect(ranked.map((entry) => entry.activityAt)).toEqual([300, 950, 600])
+  })
+
+  it('ignores sessions that belong to no listed project', () => {
+    const projects = [project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 10 })]
+
+    const [entry] = rankProjectsBySessionActivity(projects, [session('ses_1', '/srv/other', 900)])
+
+    expect(entry.activityAt).toBe(10)
+  })
+
+  it('names a project from its trimmed title', () => {
+    expect(remoteProjectName(project('p1', '  Alpha  ', '/work/alpha', { created: 1, updated: 2 }))).toBe('Alpha')
+  })
+
+  it('names a project from its directory when it has no title', () => {
+    expect(remoteProjectName(project('p1', undefined, '/work/beta', { created: 1, updated: 2 }))).toBe('beta')
+    expect(remoteProjectName(project('p1', '   ', '/work/gamma', { created: 1, updated: 2 }))).toBe('gamma')
+  })
+
+  it('finds the project that owns a directory or one nested inside it', () => {
+    const projects = [
+      project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 2 }),
+      project('p2', 'Beta', '/work/beta', { created: 1, updated: 2 }),
+    ]
+
+    expect(findRemoteProjectForDirectory(projects, '/work/beta')?.id).toBe('p2')
+    expect(findRemoteProjectForDirectory(projects, '/work/beta/packages/web')?.id).toBe('p2')
+  })
+
+  it('picks the deepest project when one canonical directory contains another', () => {
+    const projects = [
+      project('p_parent', 'Repo', '/work/repo', { created: 1, updated: 2 }),
+      project('p_child', 'App', '/work/repo/packages/app', { created: 1, updated: 3 }),
+    ]
+
+    expect(findRemoteProjectForDirectory(projects, '/work/repo')?.id).toBe('p_parent')
+    expect(findRemoteProjectForDirectory(projects, '/work/repo/packages/app')?.id).toBe('p_child')
+    expect(findRemoteProjectForDirectory(projects, '/work/repo/packages/app/src')?.id).toBe('p_child')
+  })
+
+  it('credits a session in a nested project to the deepest project', () => {
+    const projects = [
+      project('p_parent', 'Repo', '/work/repo', { created: 1, updated: 20 }),
+      project('p_child', 'App', '/work/repo/packages/app', { created: 1, updated: 10 }),
+    ]
+
+    const ranked = rankProjectsBySessionActivity(projects, [
+      session('ses_nested', '/work/repo/packages/app/src', 400),
+    ])
+
+    expect(ranked.find((entry) => entry.project.id === 'p_child')?.activityAt).toBe(400)
+    expect(ranked.find((entry) => entry.project.id === 'p_parent')?.activityAt).toBe(20)
+  })
+
+  it('returns no project when no canonical directory contains the directory', () => {
+    const projects = [project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 2 })]
+
+    expect(findRemoteProjectForDirectory(projects, '/srv/elsewhere')).toBeUndefined()
+  })
+
+  it('does not match a directory that only shares a prefix with a canonical directory', () => {
+    const projects = [project('p1', 'Alpha', '/work/alpha', { created: 1, updated: 2 })]
+
+    expect(findRemoteProjectForDirectory(projects, '/work/alphabet')).toBeUndefined()
+  })
+})
diff --git a/frontend/src/api/opencode.ts b/frontend/src/api/opencode.ts
index b38aa8afb..40bbabf9f 100644
--- a/frontend/src/api/opencode.ts
+++ b/frontend/src/api/opencode.ts
@@ -1,6 +1,7 @@
 import { openCodeLocation, parseOpenCodeModelRef } from '@opencode-manager/shared/opencode'
 import { MANAGER_PROMPT_CLIENT_METADATA_KEY } from '@opencode-manager/shared/schemas'
 import { isMobileViewport } from '@/hooks/useMobile'
+import { getDirectoryName } from '@/lib/utils'
 import { callOpenCode } from './opencodeApi'
 import type {
   AgentInfo,
@@ -37,6 +38,100 @@ export type OpenCodeLocationInfo = Awaited<ReturnType<OpenCodeApi['location']['g
 
 export type OpenCodeProject = Awaited<ReturnType<OpenCodeApi['project']['list']>>[number]
 
+/** A project paired with the timestamp that represents its most recent activity. */
+export interface RemoteProjectActivity {
+  project: OpenCodeProject
+  activityAt: number
+}
+
+/**
+ * Orders projects from the most to the least recently updated.
+ *
+ * A project's own update time covers metadata edits and registration, not work, so this is the
+ * ordering used when no session evidence is available.
+ *
+ * @param projects Projects to order.
+ * @returns A new array with the projects sorted by update time; the input is left untouched.
+ */
+export function sortProjectsByUpdatedAt(projects: OpenCodeProject[]): OpenCodeProject[] {
+  return [...projects].sort((a, b) => b.time.updated - a.time.updated)
+}
+
+/**
+ * Derives each project's activity time from the newest session of the server that belongs to it and
+ * orders projects by that time.
+ *
+ * Session update times record work; a project's own update time only records metadata edits and
+ * registration, so projects without a session in the given page fall back to it and sort after the
+ * session-backed ones. `time.active` is deliberately unused: OpenCode stamps it on every location
+ * boot, including boots caused by other clients and idle evictions.
+ *
+ * @param projects Projects of one server.
+ * @param sessions Sessions of that server, as returned by a first session page.
+ * @returns The projects with their activity time, most recently active first.
+ */
+export function rankProjectsBySessionActivity(
+  projects: OpenCodeProject[],
+  sessions: SessionInfo[],
+): RemoteProjectActivity[] {
+  const sessionActivityByProjectId = new Map<string, number>()
+  for (const session of sessions) {
+    const project = findRemoteProjectForDirectory(projects, session.location.directory)
+    if (!project) continue
+    const updated = session.time.updated
+    const current = sessionActivityByProjectId.get(project.id)
+    if (current === undefined || updated > current) {
+      sessionActivityByProjectId.set(project.id, updated)
+    }
+  }
+
+  const sessionActivity = (project: OpenCodeProject) => sessionActivityByProjectId.get(project.id)
+
+  return projects
+    .map((project) => ({
+      project,
+      activityAt: sessionActivity(project) ?? project.time.updated,
+    }))
+    .sort((a, b) => {
+      const aHasSession = sessionActivity(a.project) !== undefined
+      const bHasSession = sessionActivity(b.project) !== undefined
+      if (aHasSession !== bHasSession) return aHasSession ? -1 : 1
+      return b.activityAt - a.activityAt
+    })
+}
+
+/**
+ * Returns the display name of a project, falling back to the name of its directory.
+ *
+ * @param project Project whose name is resolved.
+ * @returns The trimmed project name, or the last segment of its canonical directory.
+ */
+export function remoteProjectName(project: OpenCodeProject): string {
+  return project.name?.trim() || getDirectoryName(project.canonical)
+}
+
+/**
+ * Finds the project that owns a directory, matching its canonical directory and anything nested
+ * inside it. Nested projects share a canonical prefix, so the deepest match owns the directory.
+ *
+ * @param projects Projects of the server that owns the directory.
+ * @param directory Directory whose owning project is resolved.
+ * @returns The owning project, or undefined when the directory belongs to none of them.
+ */
+export function findRemoteProjectForDirectory(
+  projects: OpenCodeProject[],
+  directory: string,
+): OpenCodeProject | undefined {
+  let owner: OpenCodeProject | undefined
+  for (const project of projects) {
+    if (directory !== project.canonical && !directory.startsWith(`${project.canonical}/`)) continue
+    if (!owner || project.canonical.length > owner.canonical.length) {
+      owner = project
+    }
+  }
+  return owner
+}
+
 export type VcsInfo = Awaited<ReturnType<OpenCodeApi['vcs']['get']>>['data']
 
 export type VcsFileStatus = Awaited<ReturnType<OpenCodeApi['vcs']['status']>>['data'][number]
diff --git a/frontend/src/components/message/ComposerModelPill.tsx b/frontend/src/components/message/ComposerModelPill.tsx
new file mode 100644
index 000000000..89133d90d
--- /dev/null
+++ b/frontend/src/components/message/ComposerModelPill.tsx
@@ -0,0 +1,103 @@
+import { memo, useMemo } from 'react'
+import { ModelQuickSelect } from '@/components/model/ModelQuickSelect'
+import { ContextUsageMeter } from '@/components/session/ContextUsageMeter'
+import { useSession } from '@/hooks/useOpenCode'
+import { useContextUsage } from '@/hooks/useContextUsage'
+import type { ModelSelectionSession } from '@/hooks/useModelSelection'
+import {
+  CONTEXT_USAGE_TEXT_CLASS,
+  contextUsageAccessibleLabel,
+  contextUsageTone,
+  formatContextUsage,
+} from '@/lib/contextUsage'
+import { cn } from '@/lib/utils'
+
+interface ComposerModelPillProps {
+  directory?: string
+  sessionID: string
+  modelName: string
+  variant: string | null
+  modelSelectionSession?: ModelSelectionSession
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  isCompacting: boolean
+  onCompact: () => void
+}
+
+/**
+ * Model selector trigger for the composer.
+ *
+ * Owns the context usage observer so transcript streaming flushes re-render only this pill instead of the
+ * whole composer subtree.
+ */
+export const ComposerModelPill = memo(function ComposerModelPill({
+  directory,
+  sessionID,
+  modelName,
+  variant,
+  modelSelectionSession,
+  open,
+  onOpenChange,
+  isCompacting,
+  onCompact,
+}: ComposerModelPillProps) {
+  const { data: session } = useSession(sessionID, directory)
+  const contextUsage = useContextUsage(sessionID, directory, session?.revert?.messageID)
+  const pillUsage = contextUsage ? formatContextUsage(contextUsage) : null
+  const pillUsageTone = CONTEXT_USAGE_TEXT_CLASS[contextUsageTone(contextUsage?.usagePercentage ?? null)]
+  const pillLabel = [
+    modelName || 'Select model',
+    variant ? `${variant} variant` : null,
+    contextUsage ? contextUsageAccessibleLabel(contextUsage) : null,
+  ].filter((part): part is string => part !== null).join(', ')
+
+  const trigger = useMemo(
+    () => (
+      <button
+        aria-label={pillLabel}
+        className="relative px-2.5 py-0.5 md:px-3 min-h-11 md:min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
+      >
+        <span className="truncate w-full text-left">{modelName || 'Select model'}</span>
+        {(variant || pillUsage) && (
+          <span className="flex w-full min-w-0 items-center gap-1 text-[10px] leading-tight">
+            {variant && (
+              <span className="truncate text-left capitalize text-highlight">{variant}</span>
+            )}
+            {variant && pillUsage && (
+              <span aria-hidden="true" className="text-muted-foreground">·</span>
+            )}
+            {pillUsage && (
+              <span
+                data-testid="model-pill-context-usage"
+                className={cn('shrink-0 font-medium', pillUsageTone)}
+              >
+                {pillUsage}
+              </span>
+            )}
+          </span>
+        )}
+        {contextUsage && (
+          <ContextUsageMeter
+            percentage={contextUsage.usagePercentage}
+            className="absolute inset-x-0 bottom-0"
+          />
+        )}
+      </button>
+    ),
+    [contextUsage, modelName, pillLabel, pillUsage, pillUsageTone, variant],
+  )
+
+  return (
+    <ModelQuickSelect
+      directory={directory}
+      open={open}
+      onOpenChange={onOpenChange}
+      session={modelSelectionSession}
+      contextUsage={contextUsage}
+      isCompacting={isCompacting}
+      onCompact={onCompact}
+    >
+      {trigger}
+    </ModelQuickSelect>
+  )
+})
diff --git a/frontend/src/components/message/PromptInput.command.test.tsx b/frontend/src/components/message/PromptInput.command.test.tsx
index eb07be053..226567b53 100644
--- a/frontend/src/components/message/PromptInput.command.test.tsx
+++ b/frontend/src/components/message/PromptInput.command.test.tsx
@@ -56,6 +56,7 @@ vi.mock('@/hooks/useOpenCode', async () => {
     ...actual,
     useAgents: () => ({ data: mocks.agents }),
     useSkills: () => ({ data: mocks.skills }),
+    useSession: () => ({ data: undefined }),
   }
 })
 
diff --git a/frontend/src/components/message/PromptInput.composer.test.tsx b/frontend/src/components/message/PromptInput.composer.test.tsx
index f9fd93b6c..e7080deed 100644
--- a/frontend/src/components/message/PromptInput.composer.test.tsx
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -1,10 +1,12 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useSyncExternalStore } from 'react'
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { PromptInput } from './PromptInput'
 import { useComposerDraftStore } from '@/stores/composerDraftStore'
 import { useSessionStatus } from '@/stores/sessionStatusStore'
 import { createCommandActionsMock, createVoiceConversationControllerMock } from '@/test/test-utils'
+import type { ContextUsage } from '@/lib/contextUsage'
 
 const mocks = vi.hoisted(() => ({
   useSTT: vi.fn(),
@@ -21,6 +23,11 @@ const mocks = vi.hoisted(() => ({
   useSendErrorStore: vi.fn(),
   useHasBackgroundActivity: vi.fn(),
   useSendPrompt: vi.fn(),
+  useContextUsage: vi.fn(),
+  contextUsageListeners: new Set<() => void>(),
+  contextUsageValue: null as ContextUsage | null,
+  agentQuickSelectRenders: { current: 0 },
+  sessionData: undefined as { revert?: { messageID: string } } | undefined,
   hasPendingPermission: vi.fn(() => false),
   setShowDialog: vi.fn(),
 }))
@@ -54,9 +61,11 @@ vi.mock('@/hooks/useOpenCode', () => ({
   useSendShell: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(() => Promise.resolve()), isPending: false }),
   useAgents: () => ({ data: [] }),
   useSkills: () => ({ data: [] }),
+  useSession: () => ({ data: mocks.sessionData }),
 }))
 
 vi.mock('@/hooks/useProviders', () => ({ useProviders: () => ({ data: undefined }) }))
+vi.mock('@/hooks/useContextUsage', () => ({ useContextUsage: mocks.useContextUsage }))
 
 vi.mock('@/contexts/EventContext', () => ({
   usePermissions: () => ({
@@ -66,7 +75,10 @@ vi.mock('@/contexts/EventContext', () => ({
 }))
 
 vi.mock('@/components/agent/AgentQuickSelect', () => ({
-  AgentQuickSelect: () => <div data-testid="agent-quick-select" />,
+  AgentQuickSelect: () => {
+    mocks.agentQuickSelectRenders.current += 1
+    return <div data-testid="agent-quick-select" />
+  },
 }))
 
 vi.mock('@/components/model/ModelQuickSelect', () => ({
@@ -87,6 +99,22 @@ vi.mock('@/hooks/useSessionGoals', () => ({
 }))
 vi.mock('@/hooks/useSessionPermissionMode', () => ({ useSessionPermissionMode: () => ({ data: undefined }) }))
 
+function subscribeContextUsage(listener: () => void) {
+  mocks.contextUsageListeners.add(listener)
+  return () => {
+    mocks.contextUsageListeners.delete(listener)
+  }
+}
+
+function getContextUsageSnapshot() {
+  return mocks.contextUsageValue
+}
+
+function setContextUsage(usage: ContextUsage | null) {
+  mocks.contextUsageValue = usage
+  mocks.contextUsageListeners.forEach((listener) => listener())
+}
+
 const createTestQueryClient = () => new QueryClient({
   defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
 })
@@ -153,6 +181,11 @@ describe('PromptInput composer layout', () => {
     mocks.useSessionAgentStore.mockImplementation((selector: (state: unknown) => unknown) => selector({ setAgent: vi.fn() }))
     mocks.useSendErrorStore.mockImplementation((selector: (state: unknown) => unknown) => selector({ errors: {} }))
     mocks.useHasBackgroundActivity.mockReturnValue(false)
+    mocks.useContextUsage.mockReturnValue(null)
+    mocks.contextUsageListeners.clear()
+    mocks.contextUsageValue = null
+    mocks.agentQuickSelectRenders.current = 0
+    mocks.sessionData = undefined
   })
 
   it('anchors the activity bar in the gap above the controls row', () => {
@@ -242,6 +275,89 @@ describe('PromptInput composer layout', () => {
     })
   })
 
+  describe('model pill context usage', () => {
+    const setUsage = (usage: ContextUsage) => {
+      mocks.useContextUsage.mockReturnValue(usage)
+    }
+
+    it('shows the percentage with its tone and the meter on the model pill', () => {
+      setUsage({ totalTokens: 84000, usagePercentage: 42, contextLimit: 200000 })
+      renderComponent()
+
+      const pill = screen.getByRole('button', { name: /test-model, context 42% used/ })
+      const usage = screen.getByTestId('model-pill-context-usage')
+
+      expect(pill).toContainElement(usage)
+      expect(usage).toHaveTextContent('42%')
+      expect(usage).toHaveClass('text-success')
+      expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '42%' })
+    })
+
+    it('tints the warning tone from 50 percent', () => {
+      setUsage({ totalTokens: 120000, usagePercentage: 50, contextLimit: 240000 })
+      renderComponent()
+
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveClass('text-warning')
+    })
+
+    it('tints the destructive tone from 80 percent', () => {
+      setUsage({ totalTokens: 176000, usagePercentage: 88, contextLimit: 200000 })
+      renderComponent()
+
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveClass('text-destructive')
+      expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '88%' })
+    })
+
+    it('caps the meter at full width when usage exceeds the context window', () => {
+      setUsage({ totalTokens: 260000, usagePercentage: 130, contextLimit: 200000 })
+      renderComponent()
+
+      expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '100%' })
+    })
+
+    it('falls back to a compact token count without a known context limit', () => {
+      setUsage({ totalTokens: 12400, usagePercentage: null, contextLimit: null })
+      renderComponent()
+
+      expect(screen.getByRole('button', { name: /test-model, context 12k tokens used/ })).toBeInTheDocument()
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveTextContent('12k')
+      expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '0%' })
+    })
+
+    it('hides the usage without context data', () => {
+      renderComponent()
+
+      expect(screen.getByRole('button', { name: 'test-model' })).toBeInTheDocument()
+      expect(screen.queryByTestId('model-pill-context-usage')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('context-usage-meter')).not.toBeInTheDocument()
+    })
+
+    it('re-renders only the pill when the context usage changes', () => {
+      mocks.useContextUsage.mockImplementation(() => useSyncExternalStore(subscribeContextUsage, getContextUsageSnapshot))
+      setContextUsage({ totalTokens: 84000, usagePercentage: 42, contextLimit: 200000 })
+      renderComponent()
+
+      const siblingRenders = mocks.agentQuickSelectRenders.current
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveTextContent('42%')
+      expect(siblingRenders).toBeGreaterThan(0)
+
+      act(() => {
+        setContextUsage({ totalTokens: 100000, usagePercentage: 50, contextLimit: 200000 })
+      })
+
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveTextContent('50%')
+      expect(screen.getByTestId('model-pill-context-usage')).toHaveClass('text-warning')
+      expect(mocks.agentQuickSelectRenders.current).toBe(siblingRenders)
+    })
+
+    it('measures usage up to the staged revert boundary', () => {
+      mocks.sessionData = { revert: { messageID: 'msg_2' } }
+      renderComponent()
+
+      expect(mocks.useContextUsage).toHaveBeenCalledWith('test-session', '/test', 'msg_2')
+    })
+  })
+
   describe('mobile key bar', () => {
     beforeEach(() => {
       mocks.useMobile.mockReturnValue(true)
diff --git a/frontend/src/components/message/PromptInput.draft.test.tsx b/frontend/src/components/message/PromptInput.draft.test.tsx
index 207880829..087bf0d39 100644
--- a/frontend/src/components/message/PromptInput.draft.test.tsx
+++ b/frontend/src/components/message/PromptInput.draft.test.tsx
@@ -54,6 +54,7 @@ vi.mock('@/hooks/useOpenCode', () => ({
   useSendShell: () => ({ mutate: mocks.useSendShell, mutateAsync: mocks.useSendShell, isPending: false }),
   useAgents: () => ({ data: [] }),
   useSkills: () => ({ data: [] }),
+  useSession: () => ({ data: undefined }),
 }))
 
 vi.mock('@/hooks/useProviders', () => ({ useProviders: () => ({ data: undefined }) }))
diff --git a/frontend/src/components/message/PromptInput.goal.test.tsx b/frontend/src/components/message/PromptInput.goal.test.tsx
index 2f63e25f3..011673e91 100644
--- a/frontend/src/components/message/PromptInput.goal.test.tsx
+++ b/frontend/src/components/message/PromptInput.goal.test.tsx
@@ -47,6 +47,7 @@ vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
     useInterruptSession: () => ({ mutate: mocks.interrupt }),
     useAgents: () => ({ data: mocks.agents }),
     useSkills: () => ({ data: mocks.skills }),
+    useSession: () => ({ data: undefined }),
   }
 })
 
diff --git a/frontend/src/components/message/PromptInput.mention.test.tsx b/frontend/src/components/message/PromptInput.mention.test.tsx
index 2721ecac2..aaf38ed15 100644
--- a/frontend/src/components/message/PromptInput.mention.test.tsx
+++ b/frontend/src/components/message/PromptInput.mention.test.tsx
@@ -44,6 +44,7 @@ vi.mock('@/hooks/useOpenCode', async () => {
     ...actual,
     useAgents: () => ({ data: mocks.agents }),
     useSkills: () => ({ data: mocks.skills }),
+    useSession: () => ({ data: undefined }),
   }
 })
 
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
index 22f4f146a..c09a9656f 100644
--- a/frontend/src/components/message/PromptInput.stt.test.tsx
+++ b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -59,6 +59,7 @@ vi.mock('@/hooks/useOpenCode', () => ({
   useSendShell: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(() => Promise.resolve()), isPending: false }),
   useAgents: () => ({ data: [] }),
   useSkills: () => ({ data: [] }),
+  useSession: () => ({ data: undefined }),
 }))
 
 vi.mock('@/hooks/useCommands', () => ({
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 624964824..2be610038 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -13,7 +13,7 @@ import { useSessionAgentStore } from '@/stores/sessionAgentStore'
 import { useSendErrorStore } from '@/stores/sendErrorStore'
 import { useComposerDraftStore, type ComposerDraft } from '@/stores/composerDraftStore'
 import { useRecentCommandsStore } from '@/stores/recentCommandsStore'
-import { useHasBackgroundActivity } from '@/stores/sessionStatusStore'
+import { useHasBackgroundActivity, useSessionStatusForSession } from '@/stores/sessionStatusStore'
 import { useTouchTapSelect } from '@/hooks/useTouchTapSelect'
 import { useMobile } from '@/hooks/useMobile'
 import { FINE_POINTER_MEDIA_QUERY, useMediaQuery } from '@/hooks/useMediaQuery'
@@ -27,11 +27,11 @@ import { IconToggleButton } from '@/components/ui/icon-toggle-button'
 
 import { PromptSuggestions, type PromptSuggestion } from './PromptSuggestions'
 import { ComposerActivityBar } from './ComposerActivityBar'
-import { ModelQuickSelect } from '@/components/model/ModelQuickSelect'
 import { AgentQuickSelect } from '@/components/agent/AgentQuickSelect'
 import { VoiceConversation, type VoiceConversationHandle } from './VoiceConversation'
 import { PermissionModeToggle } from '@/components/session/PermissionModeToggle'
 import { SessionSandboxMenu } from '@/components/session/SessionSandboxMenu'
+import { ComposerModelPill } from './ComposerModelPill'
 import { ComposerToolsMenu } from './ComposerToolsMenu'
 import { useSessionGoal, useStartSessionGoal } from '@/hooks/useSessionGoals'
 import { useSessionPermissionMode } from '@/hooks/useSessionPermissionMode'
@@ -1012,6 +1012,9 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
   const { setShowDialog, hasForSession: hasPermissionsForSession } = usePermissions()
   const hasPendingPermissionForSession = hasPermissionsForSession(sessionID)
   const { hasVariants, currentVariant, cycleVariant } = useVariants(directory, modelSelectionSession)
+  const isCompacting = useSessionStatusForSession(sessionID).type === 'compact'
+  const modelPillVariant = hasVariants && currentVariant ? currentVariant : null
+  const handleCompact = useCallback(() => commandActions.compact(''), [commandActions])
 
   const handleAgentChange = useCallback((agentId: string) => {
     setLocalMode(agentId)
@@ -1340,21 +1343,17 @@ return (
                   </IconToggleButton>
                 </>
               ) : null}
-              <ModelQuickSelect
+              <ComposerModelPill
                 directory={directory}
+                sessionID={sessionID}
+                modelName={displayModelName}
+                variant={modelPillVariant}
+                modelSelectionSession={modelSelectionSession}
                 open={isModelPickerOpen}
                 onOpenChange={setIsModelPickerOpen}
-                session={modelSelectionSession}
-              >
-                <button
-                  className="px-2.5 py-0.5 md:px-3 min-h-11 md:min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
-                >
-                  <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
-                  {hasVariants && currentVariant && (
-                    <span className="text-[10px] text-highlight truncate w-full text-left capitalize">{currentVariant}</span>
-                  )}
-                </button>
-              </ModelQuickSelect>
+                isCompacting={isCompacting}
+                onCompact={handleCompact}
+              />
             </>
           )}
         </div>
diff --git a/frontend/src/components/model/ModelQuickSelect.test.tsx b/frontend/src/components/model/ModelQuickSelect.test.tsx
index 56a1867d1..a179016f0 100644
--- a/frontend/src/components/model/ModelQuickSelect.test.tsx
+++ b/frontend/src/components/model/ModelQuickSelect.test.tsx
@@ -563,3 +563,140 @@ describe('ModelQuickSelect keyboard navigation', () => {
     }
   })
 })
+
+describe('ModelQuickSelect context strip', () => {
+  const session = { id: 'ses_1' }
+  const usage = { totalTokens: 12000, usagePercentage: 6, contextLimit: 200000 }
+
+  it('shows the used and limit tokens with the percentage and meter', () => {
+    render(<ModelQuickSelect open session={session} contextUsage={usage} onCompact={vi.fn()} />)
+
+    const summary = screen.getByTestId('context-usage-summary')
+
+    expect(summary).toHaveTextContent('12k / 200k · 6%')
+    expect(summary).toHaveClass('text-success')
+    expect(summary).toHaveAttribute('aria-label', 'context 6% used')
+    expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '6%' })
+  })
+
+  it('tints the summary with the warning and destructive tones', () => {
+    const { rerender } = render(
+      <ModelQuickSelect open session={session} contextUsage={{ ...usage, usagePercentage: 60 }} />,
+    )
+    expect(screen.getByTestId('context-usage-summary')).toHaveClass('text-warning')
+
+    rerender(<ModelQuickSelect open session={session} contextUsage={{ ...usage, usagePercentage: 85 }} />)
+    expect(screen.getByTestId('context-usage-summary')).toHaveClass('text-destructive')
+  })
+
+  it('compacts the session from the strip', async () => {
+    const user = userEvent.setup()
+    const onCompact = vi.fn()
+
+    render(<ModelQuickSelect open session={session} contextUsage={usage} onCompact={onCompact} />)
+
+    await user.click(screen.getByRole('button', { name: 'Compact session' }))
+
+    expect(onCompact).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables compaction while compacting or without a session', () => {
+    const onCompact = vi.fn()
+    const { rerender } = render(
+      <ModelQuickSelect open session={session} contextUsage={usage} isCompacting onCompact={onCompact} />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Compact session' })).toBeDisabled()
+
+    rerender(<ModelQuickSelect open contextUsage={usage} onCompact={onCompact} />)
+
+    expect(screen.getByRole('button', { name: 'Compact session' })).toBeDisabled()
+    expect(onCompact).not.toHaveBeenCalled()
+  })
+
+  it('falls back to tokens and an empty meter without a known limit', () => {
+    render(
+      <ModelQuickSelect
+        open
+        session={session}
+        contextUsage={{ totalTokens: 12000, usagePercentage: null, contextLimit: null }}
+      />,
+    )
+
+    expect(screen.getByTestId('context-usage-summary')).toHaveTextContent('12k tokens')
+    expect(screen.getByTestId('context-usage-meter-fill')).toHaveStyle({ width: '0%' })
+  })
+
+  it('omits the strip without context usage', () => {
+    render(<ModelQuickSelect open session={session} />)
+
+    expect(screen.queryByTestId('context-usage-strip')).not.toBeInTheDocument()
+  })
+})
+
+describe('ModelQuickSelect model descriptions', () => {
+  const limitedProviders: Provider[] = [
+    {
+      id: 'anthropic',
+      name: 'Anthropic',
+      models: [
+        {
+          id: 'claude-sonnet-4',
+          key: 'claude-sonnet-4',
+          name: 'Claude Sonnet 4',
+          released: 0,
+          free: false,
+          limit: { context: 200000, output: 8192 },
+        },
+        {
+          id: 'claude-opus-5-5',
+          key: 'claude-opus-5-5',
+          name: 'Claude Opus 5.5',
+          released: 0,
+          free: false,
+          limit: { context: 1000000, output: 8192 },
+        },
+      ],
+    },
+  ]
+
+  function selectModel(modelID: string) {
+    const modelState = { favorite: [], recent: [], variant: {} }
+    mocks.useModelSelection.mockReturnValue({
+      model: { providerID: 'anthropic', modelID },
+      modelString: `anthropic/${modelID}`,
+      info: undefined,
+      activeAgent: null,
+      recentModels: [],
+      favoriteModels: [],
+      configured: null,
+      modelState,
+      setModel: vi.fn(),
+      setActiveAgent: vi.fn(),
+      toggleFavorite: vi.fn(),
+      removeRecentModel: vi.fn(),
+      isModelReady: true,
+    })
+    mocks.useModelSections.mockReturnValue({
+      providers: limitedProviders,
+      sections: buildModelSections(limitedProviders, modelState, null),
+      defaultModel: null,
+      modelState,
+      isLoading: false,
+    })
+  }
+
+  it('formats the context limit like the context strip', () => {
+    selectModel('claude-sonnet-4')
+    render(<ModelQuickSelect open />)
+
+    expect(screen.getByText('Anthropic · 200k context', { selector: 'p' })).toBeInTheDocument()
+  })
+
+  it('formats million-token limits without a trailing decimal', () => {
+    selectModel('claude-opus-5-5')
+    render(<ModelQuickSelect open />)
+
+    expect(screen.getByText('Anthropic · 1M context', { selector: 'p' })).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/components/model/ModelQuickSelect.tsx b/frontend/src/components/model/ModelQuickSelect.tsx
index 9d2d69c44..24e9dc94a 100644
--- a/frontend/src/components/model/ModelQuickSelect.tsx
+++ b/frontend/src/components/model/ModelQuickSelect.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Check, ChevronDown, ChevronLeft, ChevronRight, Search, Star, Trash2, X, type LucideIcon } from 'lucide-react'
 import { useModelSelection, type ModelSelectionSession } from '@/hooks/useModelSelection'
 import { useMobile } from '@/hooks/useMobile'
@@ -14,8 +14,16 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
+import { ContextUsageMeter } from '@/components/session/ContextUsageMeter'
 import { buildModelSections, filterModelSections, type ModelOption } from '@/lib/modelSections'
 import { isTextEntryElement } from '@/lib/domTargets'
+import {
+  CONTEXT_USAGE_TEXT_CLASS,
+  contextUsageAccessibleLabel,
+  contextUsageTone,
+  formatCompactTokens,
+  type ContextUsage,
+} from '@/lib/contextUsage'
 
 interface ModelQuickSelectProps {
   directory?: string
@@ -24,6 +32,9 @@ interface ModelQuickSelectProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   session?: ModelSelectionSession
+  contextUsage?: ContextUsage | null
+  isCompacting?: boolean
+  onCompact?: () => void
 }
 
 interface ModelListItem {
@@ -70,6 +81,46 @@ function formatModelCount(count: number) {
   return `${count} ${count === 1 ? 'model' : 'models'}`
 }
 
+interface ContextUsageStripProps {
+  usage: ContextUsage
+  onCompact?: () => void
+  compactDisabled: boolean
+}
+
+function ContextUsageStrip({ usage, onCompact, compactDisabled }: ContextUsageStripProps) {
+  const percentage = usage.usagePercentage
+  const toneClass = CONTEXT_USAGE_TEXT_CLASS[contextUsageTone(percentage)]
+  const summary = usage.contextLimit === null || percentage === null
+    ? `${formatCompactTokens(usage.totalTokens)} tokens`
+    : `${formatCompactTokens(usage.totalTokens)} / ${formatCompactTokens(usage.contextLimit)} · ${percentage}%`
+
+  return (
+    <div data-testid="context-usage-strip" className="shrink-0 border-b border-border px-4 pb-2">
+      <ContextUsageMeter percentage={percentage} />
+      <div className="mt-1.5 flex items-center gap-3">
+        <span
+          data-testid="context-usage-summary"
+          aria-label={contextUsageAccessibleLabel(usage)}
+          className={`min-w-0 truncate text-xs font-medium ${toneClass}`}
+        >
+          {summary}
+        </span>
+        {onCompact && (
+          <button
+            type="button"
+            onClick={onCompact}
+            disabled={compactDisabled}
+            aria-label="Compact session"
+            className="ml-auto shrink-0 rounded text-xs font-medium text-info hover:underline disabled:cursor-not-allowed disabled:opacity-40 disabled:no-underline"
+          >
+            Compact
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
 function VirtualizedList<T>({
   items,
   itemHeight,
@@ -169,13 +220,16 @@ function VirtualizedList<T>({
   )
 }
 
-export function ModelQuickSelect({
+export const ModelQuickSelect = memo(function ModelQuickSelect({
   directory,
   disabled,
   children,
   open,
   onOpenChange,
   session,
+  contextUsage,
+  isCompacting = false,
+  onCompact,
 }: ModelQuickSelectProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false)
   const isOpen = open ?? internalIsOpen
@@ -410,11 +464,15 @@ export function ModelQuickSelect({
     setSearchQuery('')
   }
 
+  const handleCompact = () => {
+    onCompact?.()
+    handleOpenChange(false)
+  }
+
   const getDescription = (item: ModelListItem) => {
     const context = item.model?.limit?.context
     if (context) {
-      const formattedContext = context >= 1000000 ? `${(context / 1000000).toFixed(1)}M` : context.toLocaleString()
-      return `${item.providerName} · ${formattedContext} context`
+      return `${item.providerName} · ${formatCompactTokens(context)} context`
     }
 
     return item.providerName
@@ -576,6 +634,13 @@ export function ModelQuickSelect({
         className="z-[300] border-border bg-popover text-foreground shadow-2xl md:mx-auto md:max-w-lg"
         ariaLabel="Select model"
       >
+        {contextUsage && (
+          <ContextUsageStrip
+            usage={contextUsage}
+            onCompact={onCompact ? handleCompact : undefined}
+            compactDisabled={!session?.id || isCompacting}
+          />
+        )}
         <div className={`flex items-center justify-between gap-2 px-4 ${showAllModels ? 'pb-2 pt-2' : 'pb-3 pt-0'}`}>
           {showAllModels ? (
             <>
@@ -736,4 +801,4 @@ export function ModelQuickSelect({
       </BottomSheet>
     </>
   )
-}
+})
diff --git a/frontend/src/components/navigation/DesktopSessionTree.tsx b/frontend/src/components/navigation/DesktopSessionTree.tsx
index a31d6bf94..05ca0cf67 100644
--- a/frontend/src/components/navigation/DesktopSessionTree.tsx
+++ b/frontend/src/components/navigation/DesktopSessionTree.tsx
@@ -11,7 +11,7 @@ import { useSessionPins } from '@/hooks/useSessionPins'
 import { useSidebarServerSelection } from '@/hooks/useSidebarServerSelection'
 import { RemoteProjectNavList } from '@/components/navigation/RemoteProjectNav'
 import {
-  NewSessionButton,
+  LocalRepoNewSessionButton,
   RepoNavGroup,
   RepoSessionNavList,
   SearchClearButton,
@@ -25,7 +25,7 @@ import {
   isCurrentSessionItem,
   isRepoReady,
 } from '@/components/navigation/sidebar-session-tree'
-import { getRepoPath, getSessionPath } from '@/lib/navigation'
+import { getRepoPath } from '@/lib/navigation'
 import { getRepoDisplayName } from '@/lib/utils'
 import { buildPinnedSessionKeys } from '@/lib/sessionKey'
 
@@ -124,12 +124,7 @@ function SessionSearchResults({
           onOpenRepo={() => navigate(getRepoPath(group.repo.id))}
           indicator={<RepoActivityIndicator repo={group.repo} />}
           actions={
-            <NewSessionButton
-              directory={group.repo.fullPath}
-              label={group.label}
-              sessionPath={(sessionId) => getSessionPath(group.repo.id, sessionId)}
-              onOpenSession={navigate}
-            />
+            <LocalRepoNewSessionButton repo={group.repo} onOpenSession={navigate} />
           }
         >
           {group.items.map((item) => (
@@ -199,12 +194,7 @@ function LocalSessionTree() {
           onOpenRepo={(repoId) => navigate(getRepoPath(repoId))}
           onSelectSession={navigate}
           renderActions={(repo) => (
-            <NewSessionButton
-              directory={repo.fullPath}
-              label={getRepoDisplayName(repo)}
-              sessionPath={(sessionId) => getSessionPath(repo.id, sessionId)}
-              onOpenSession={navigate}
-            />
+            <LocalRepoNewSessionButton repo={repo} onOpenSession={navigate} />
           )}
         />
       )}
diff --git a/frontend/src/components/navigation/DesktopSidebar.test.tsx b/frontend/src/components/navigation/DesktopSidebar.test.tsx
index a52b6d721..e1c29c285 100644
--- a/frontend/src/components/navigation/DesktopSidebar.test.tsx
+++ b/frontend/src/components/navigation/DesktopSidebar.test.tsx
@@ -11,6 +11,9 @@ import * as useAuthModule from '@/hooks/useAuth'
 vi.mock('@/hooks/useDesktop')
 vi.mock('@/hooks/useSidebarCollapsed')
 vi.mock('@/hooks/useAuth')
+vi.mock('@/api/repos', () => ({
+  listRepos: vi.fn().mockResolvedValue([]),
+}))
 vi.mock('@/hooks/useOpenCodeServers', () => ({
   useOpenCodeServers: () => ({ servers: [], isLoading: false }),
   useOpenCodeServerStatuses: () => ({ statuses: [], statusById: {}, isLoading: false }),
@@ -18,6 +21,10 @@ vi.mock('@/hooks/useOpenCodeServers', () => ({
 vi.mock('@/components/navigation/DesktopSessionTree', () => ({
   DesktopSessionTree: () => <div data-testid="session-tree" />,
 }))
+vi.mock('@/components/session/SessionPickerDialog', () => ({
+  SessionPickerDialog: ({ open }: { open: boolean }) =>
+    open ? <div data-testid="sessions-picker-dialog" /> : null,
+}))
 
 function LocationDisplay() {
   const location = useLocation()
@@ -166,7 +173,7 @@ describe('DesktopSidebar', () => {
     for (const label of ['Home', 'Settings', 'Logout']) {
       expect(screen.getByText(label)).toBeInTheDocument()
     }
-    for (const label of ['Menu', 'Repos', 'Files', 'MCP', 'Skills', 'Schedules', 'All Schedules', 'Source Control', 'Terminal', 'Walkthrough', 'Preview']) {
+    for (const label of ['Menu', 'Files', 'MCP', 'Skills', 'Schedules', 'All Schedules', 'Source Control', 'Terminal', 'Walkthrough', 'Preview']) {
       expect(screen.queryByText(label)).toBeNull()
     }
   })
@@ -263,7 +270,7 @@ describe('DesktopSidebar', () => {
 
     expect(screen.queryByRole('button', { name: /Switch server/ })).toBeNull()
   })
-  it('renders home, repos and account items and no session tree when collapsed', () => {
+  it('renders home, sessions and account items and no session tree when collapsed', () => {
     vi.spyOn(useDesktopModule, 'useDesktop').mockReturnValue(true)
     vi.spyOn(useSidebarCollapsedModule, 'useSidebarCollapsed').mockReturnValue([true, vi.fn()])
     vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
@@ -276,8 +283,26 @@ describe('DesktopSidebar', () => {
 
     expect(screen.queryByTestId('session-tree')).toBeNull()
     expect(screen.getByText('Home')).toBeInTheDocument()
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.getByText('Settings')).toBeInTheDocument()
     expect(screen.queryByText('Files')).toBeNull()
   })
+
+  it('opens the sessions picker dialog from the collapsed Sessions item', () => {
+    vi.spyOn(useDesktopModule, 'useDesktop').mockReturnValue(true)
+    vi.spyOn(useSidebarCollapsedModule, 'useSidebarCollapsed').mockReturnValue([true, vi.fn()])
+    vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
+      isAuthenticated: true,
+      isLoading: false,
+      logout: vi.fn(),
+    } as any)
+
+    render(<DesktopSidebar />, { wrapper: createWrapper(['/repos/5']) })
+
+    expect(screen.queryByTestId('sessions-picker-dialog')).toBeNull()
+
+    fireEvent.click(screen.getByText('Sessions'))
+
+    expect(screen.getByTestId('sessions-picker-dialog')).toBeInTheDocument()
+  })
 })
diff --git a/frontend/src/components/navigation/DesktopSidebar.tsx b/frontend/src/components/navigation/DesktopSidebar.tsx
index 2303c5e34..62b19cfb4 100644
--- a/frontend/src/components/navigation/DesktopSidebar.tsx
+++ b/frontend/src/components/navigation/DesktopSidebar.tsx
@@ -6,8 +6,10 @@ import { useSidebarWidth } from '@/hooks/useSidebarWidth'
 import { useAuth } from '@/hooks/useAuth'
 import { useUrlParams } from '@/hooks/useUrlParams'
 import { useOpenNavItem } from '@/hooks/useOpenNavItem'
+import { useSessionPickerRouteScope } from '@/hooks/useSessionPickerRouteScope'
+import { useSessionPickerNavigation } from '@/hooks/useSessionPickerNavigation'
 import { buildNavModel, type MoreDrawerItem, type NavPrimaryCta } from '@/components/navigation/moreDrawerItems'
-import { RepoQuickSwitchSheet } from '@/components/navigation/RepoQuickSwitchSheet'
+import { SessionPickerDialog } from '@/components/session/SessionPickerDialog'
 import { DesktopSessionTree } from '@/components/navigation/DesktopSessionTree'
 import { LinkedServersNav } from '@/components/navigation/LinkedServersNav'
 import {
@@ -15,10 +17,28 @@ import {
   SidebarSection,
   SidebarItem,
 } from '@/components/ui/sidebar'
-import { FolderGit2 } from 'lucide-react'
+import { List } from 'lucide-react'
 
 const FOOTER_ITEM_KEYS = new Set(['home', 'settings', 'logout'])
 
+function DesktopSessionsPicker({ onDismiss }: { onDismiss: () => void }) {
+  const { currentRepo, activeSessionID, remote } = useSessionPickerRouteScope(true)
+  const pickerNavigation = useSessionPickerNavigation({ mode: 'push', onClose: onDismiss })
+
+  return (
+    <SessionPickerDialog
+      open
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onDismiss()
+      }}
+      currentRepo={currentRepo}
+      activeSessionID={activeSessionID}
+      {...pickerNavigation}
+      remote={remote}
+    />
+  )
+}
+
 export function DesktopSidebar() {
   const location = useLocation()
   const navigate = useNavigate()
@@ -26,7 +46,7 @@ export function DesktopSidebar() {
   const openNavItem = useOpenNavItem()
   const [collapsed, toggle] = useSidebarCollapsed()
   const [sidebarWidth, setSidebarWidth] = useSidebarWidth()
-  const [repoSwitcherOpen, setRepoSwitcherOpen] = useState(false)
+  const [sessionsOpen, setSessionsOpen] = useState(false)
   const { isAuthenticated, isLoading, logout } = useAuth()
 
   const isDesktop = useDesktop()
@@ -51,15 +71,15 @@ export function DesktopSidebar() {
         p.set('settingsTab', 'account')
         p.delete('mobileTab')
       }, 'push')
-    } else if (item.key === 'repos') {
-      setRepoSwitcherOpen(true)
+    } else if (item.key === 'sessions') {
+      setSessionsOpen(true)
     }
   }
 
   const footerItems = items.filter((item) => FOOTER_ITEM_KEYS.has(item.key))
   const collapsedItems: MoreDrawerItem[] = [
     footerItems[0],
-    { key: 'repos', label: 'Repos', icon: FolderGit2 },
+    { key: 'sessions', label: 'Sessions', icon: List },
     ...footerItems.slice(1),
   ]
 
@@ -133,10 +153,7 @@ export function DesktopSidebar() {
         )}
       </Sidebar>
 
-      <RepoQuickSwitchSheet
-        isOpen={repoSwitcherOpen}
-        onClose={() => setRepoSwitcherOpen(false)}
-      />
+      {sessionsOpen && <DesktopSessionsPicker onDismiss={() => setSessionsOpen(false)} />}
     </>
   )
 }
diff --git a/frontend/src/components/navigation/LinkedServersNav.test.tsx b/frontend/src/components/navigation/LinkedServersNav.test.tsx
index f6be0c2f0..c9aebae57 100644
--- a/frontend/src/components/navigation/LinkedServersNav.test.tsx
+++ b/frontend/src/components/navigation/LinkedServersNav.test.tsx
@@ -52,7 +52,7 @@ function SidebarServerRouteSync() {
   return null
 }
 
-function renderNav(pathname = '/', variant?: 'sidebar' | 'rail' | 'sheet') {
+function renderNav(pathname = '/', variant?: 'sidebar' | 'rail') {
   return render(
     <MemoryRouter initialEntries={[pathname]}>
       <SidebarServerRouteSync />
@@ -253,18 +253,4 @@ describe('LinkedServersNav', () => {
 
     expect(screen.queryByRole('button', { name: /Switch server/ })).not.toBeInTheDocument()
   })
-
-  it('renders a thin trigger row in the sheet variant', async () => {
-    const user = userEvent.setup()
-    setServers([kitchen])
-
-    renderNav('/', 'sheet')
-
-    expect(screen.queryByRole('heading', { name: 'Servers' })).not.toBeInTheDocument()
-    await user.click(screen.getByRole('button', { name: triggerName('OC Manager') }))
-    await user.click(await screen.findByRole('menuitem', { name: /Kitchen/ }))
-
-    expect(await screen.findByRole('button', { name: triggerName('Kitchen') })).toBeInTheDocument()
-    expect(screen.getByTestId('location')).toHaveTextContent('/')
-  })
 })
diff --git a/frontend/src/components/navigation/LinkedServersNav.tsx b/frontend/src/components/navigation/LinkedServersNav.tsx
index 6ff7ba7e6..809732f34 100644
--- a/frontend/src/components/navigation/LinkedServersNav.tsx
+++ b/frontend/src/components/navigation/LinkedServersNav.tsx
@@ -20,10 +20,10 @@ import { cn } from '@/lib/utils'
 
 const LOCAL_SERVER_LABEL = 'OC Manager'
 
-export type LinkedServersVariant = 'sidebar' | 'rail' | 'sheet' | 'header'
+type LinkedServersVariant = 'sidebar' | 'rail' | 'header'
 
 interface LinkedServersNavProps {
-  /** `sidebar` renders the full-width trigger row, `rail` the collapsed icon button, `sheet` the mobile sheet row, `header` a compact page-header trigger. */
+  /** `sidebar` renders the full-width trigger row, `rail` the collapsed icon button, `header` a compact page-header trigger. */
   variant?: LinkedServersVariant
 }
 
@@ -220,7 +220,7 @@ export function LinkedServersNav({ variant = 'sidebar' }: LinkedServersNavProps)
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
             isRail && 'mx-auto h-9 w-9 justify-center',
             variant === 'header' && 'h-8 min-w-0 max-w-[45vw] gap-2 px-2 sm:max-w-xs',
-            (variant === 'sidebar' || variant === 'sheet') && 'h-9 w-full gap-2 px-2',
+            variant === 'sidebar' && 'h-9 w-full gap-2 px-2',
           )}
         >
           <span className="relative flex shrink-0">
diff --git a/frontend/src/components/navigation/MobileSheetHost.test.tsx b/frontend/src/components/navigation/MobileSheetHost.test.tsx
index 1d425d251..be8194c27 100644
--- a/frontend/src/components/navigation/MobileSheetHost.test.tsx
+++ b/frontend/src/components/navigation/MobileSheetHost.test.tsx
@@ -8,9 +8,9 @@ vi.mock('@/components/file-browser/FileBrowserSheet', () => ({
   FileBrowserSheet: ({ isOpen, basePath, repoName }: { isOpen: boolean; basePath: string; repoName: string }) =>
     isOpen ? <div data-testid="file-browser-sheet" data-base-path={basePath} data-repo-name={repoName}>FileBrowserSheet</div> : null,
 }))
-vi.mock('@/components/navigation/RepoQuickSwitchSheet', () => ({
-  RepoQuickSwitchSheet: ({ isOpen }: { isOpen: boolean }) =>
-    isOpen ? <div data-testid="repo-quick-switch-sheet">RepoQuickSwitchSheet</div> : null,
+vi.mock('@/components/session/SessionPickerSheet', () => ({
+  SessionPickerSheet: ({ isOpen }: { isOpen: boolean }) =>
+    isOpen ? <div data-testid="session-picker-sheet">SessionPickerSheet</div> : null,
 }))
 vi.mock('@/components/navigation/NotificationsSheet', () => ({
   NotificationsSheet: ({ isOpen }: { isOpen: boolean }) =>
@@ -58,18 +58,18 @@ describe('MobileSheetHost', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  it('renders RepoQuickSwitchSheet when mobileTab=repos', () => {
+  it('renders SessionPickerSheet when mobileTab=sessions', () => {
     vi.mocked(useMobileTabBar).mockReturnValue({
-      openSheet: 'repos',
+      openSheet: 'sessions',
       open: vi.fn(),
       close: vi.fn(),
     })
     render(
-      <MemoryRouter initialEntries={['/?mobileTab=repos']}>
+      <MemoryRouter initialEntries={['/?mobileTab=sessions']}>
         <MobileSheetHost />
       </MemoryRouter>,
     )
-    expect(screen.getByTestId('repo-quick-switch-sheet')).toBeInTheDocument()
+    expect(screen.getByTestId('session-picker-sheet')).toBeInTheDocument()
   })
 
   it('renders FileBrowserSheet with correct props when mobileTab=files', () => {
@@ -134,15 +134,15 @@ describe('MobileSheetHost', () => {
   it('closes sheet when onClose is called', () => {
     const mockClose = vi.fn()
     vi.mocked(useMobileTabBar).mockReturnValue({
-      openSheet: 'repos',
+      openSheet: 'sessions',
       open: vi.fn(),
       close: mockClose,
     })
     render(
-      <MemoryRouter initialEntries={['/?mobileTab=repos']}>
+      <MemoryRouter initialEntries={['/?mobileTab=sessions']}>
         <MobileSheetHost />
       </MemoryRouter>,
     )
-    expect(screen.getByTestId('repo-quick-switch-sheet')).toBeInTheDocument()
+    expect(screen.getByTestId('session-picker-sheet')).toBeInTheDocument()
   })
 })
diff --git a/frontend/src/components/navigation/MobileSheetHost.tsx b/frontend/src/components/navigation/MobileSheetHost.tsx
index 4134cd7f0..37499fa88 100644
--- a/frontend/src/components/navigation/MobileSheetHost.tsx
+++ b/frontend/src/components/navigation/MobileSheetHost.tsx
@@ -1,7 +1,7 @@
 import { useMobileTabBar } from '@/hooks/useMobileTabBar'
 import { useMobile } from '@/hooks/useMobile'
 import { FileBrowserSheet } from '@/components/file-browser/FileBrowserSheet'
-import { RepoQuickSwitchSheet } from '@/components/navigation/RepoQuickSwitchSheet'
+import { SessionPickerSheet } from '@/components/session/SessionPickerSheet'
 import { NotificationsSheet } from '@/components/navigation/NotificationsSheet'
 import { MoreDrawer } from '@/components/navigation/MoreDrawer'
 import { isLocalOpenCodeServer, useRouteOpenCodeServerId } from '@/contexts/OpenCodeServerContext'
@@ -15,7 +15,7 @@ export function MobileSheetHost() {
 
   return (
     <>
-      <RepoQuickSwitchSheet isOpen={openSheet === 'repos'} onClose={close} />
+      <SessionPickerSheet isOpen={openSheet === 'sessions'} onClose={close} />
       {openSheet === 'files' && !isRemoteRoute && (
         <FileBrowserSheet
           isOpen
diff --git a/frontend/src/components/navigation/MobileTabBar.test.tsx b/frontend/src/components/navigation/MobileTabBar.test.tsx
index fb6c50891..bc2bbd179 100644
--- a/frontend/src/components/navigation/MobileTabBar.test.tsx
+++ b/frontend/src/components/navigation/MobileTabBar.test.tsx
@@ -70,11 +70,11 @@ describe('MobileTabBar', () => {
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.getByText('Git')).toBeInTheDocument()
     expect(screen.queryByText('Schedules')).not.toBeInTheDocument()
     const labels = screen.getAllByRole('button').map((button) => button.textContent)
-    expect(labels).toEqual(['Repos', 'Files', 'Git', 'Assistant', 'More'])
+    expect(labels).toEqual(['Sessions', 'Files', 'Git', 'Assistant', 'More'])
   })
 
   it('opens the source control dialog when Git is clicked on repo detail path', async () => {
@@ -109,7 +109,7 @@ describe('MobileTabBar', () => {
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.getByText('Assistant')).toBeInTheDocument()
     expect(screen.getByText('Schedules')).toBeInTheDocument()
   })
@@ -226,7 +226,7 @@ describe('MobileTabBar', () => {
       </QueryClientProvider>,
     )
     const labels = screen.getAllByRole('button').map((button) => button.textContent)
-    expect(labels).toEqual(['Repos', 'Git', 'Assistant', 'More'])
+    expect(labels).toEqual(['Sessions', 'Git', 'Assistant', 'More'])
     expect(screen.queryByText('Files')).not.toBeInTheDocument()
     expect(screen.queryByText('Schedules')).not.toBeInTheDocument()
   })
@@ -255,7 +255,7 @@ describe('MobileTabBar', () => {
     expect(screen.getByTestId('location')).toHaveTextContent('dialog=sourceControl')
   })
 
-  it('opens the repos sheet from the Repos tab on a linked server project page', async () => {
+  it('opens the sessions sheet from the Sessions tab on a linked server project page', async () => {
     vi.mocked(useMobile).mockReturnValue(true)
     const queryClient = new QueryClient()
     const user = userEvent.setup()
@@ -273,8 +273,8 @@ describe('MobileTabBar', () => {
       </QueryClientProvider>,
     )
 
-    await user.click(screen.getByRole('button', { name: 'Repos' }))
-    expect(screen.getByTestId('location')).toHaveTextContent('mobileTab=repos')
+    await user.click(screen.getByRole('button', { name: 'Sessions' }))
+    expect(screen.getByTestId('location')).toHaveTextContent('mobileTab=sessions')
   })
 
   it('does not render tab bar on a linked server session path', () => {
@@ -316,7 +316,7 @@ describe('MobileTabBar', () => {
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.getByText('Files')).toBeInTheDocument()
     expect(screen.getByText('Assistant')).toBeInTheDocument()
     expect(screen.getByText('Schedules')).toBeInTheDocument()
@@ -336,7 +336,7 @@ describe('MobileTabBar', () => {
       </QueryClientProvider>,
     )
     const labels = screen.getAllByRole('button').map((button) => button.textContent)
-    expect(labels).toEqual(['Repos', 'Assistant', 'Schedules', 'More'])
+    expect(labels).toEqual(['Sessions', 'Assistant', 'Schedules', 'More'])
     expect(screen.queryByText('Files')).not.toBeInTheDocument()
   })
 
@@ -350,11 +350,11 @@ describe('MobileTabBar', () => {
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.getByText('Schedules')).toBeInTheDocument()
   })
 
-  it('Repos tab is active when pathname is / and no sheet is open', () => {
+  it('Sessions tab is active when pathname is / and no sheet is open', () => {
     vi.mocked(useMobile).mockReturnValue(true)
     const queryClient = new QueryClient()
     render(
@@ -364,24 +364,24 @@ describe('MobileTabBar', () => {
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    const reposButton = screen.getByText('Repos').closest('button')
-    expect(reposButton).toHaveClass('text-primary')
-    expect(reposButton).toHaveClass('border-primary')
+    const sessionsButton = screen.getByText('Sessions').closest('button')
+    expect(sessionsButton).toHaveClass('text-primary')
+    expect(sessionsButton).toHaveClass('border-primary')
   })
 
-  it('Repos tab is active when openSheet is repos regardless of pathname', () => {
+  it('Sessions tab is active when openSheet is sessions regardless of pathname', () => {
     vi.mocked(useMobile).mockReturnValue(true)
     const queryClient = new QueryClient()
     render(
       <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={['/repos/123?mobileTab=repos']}>
+        <MemoryRouter initialEntries={['/repos/123?mobileTab=sessions']}>
           <MobileTabBar />
         </MemoryRouter>
       </QueryClientProvider>,
     )
-    const reposButton = screen.getByText('Repos').closest('button')
-    expect(reposButton).toHaveClass('text-primary')
-    expect(reposButton).toHaveClass('border-primary')
+    const sessionsButton = screen.getByText('Sessions').closest('button')
+    expect(sessionsButton).toHaveClass('text-primary')
+    expect(sessionsButton).toHaveClass('border-primary')
   })
 
   it('maintains stable callbacks when search changes but mobileTab does not', () => {
@@ -396,8 +396,8 @@ describe('MobileTabBar', () => {
       </QueryClientProvider>,
     )
 
-    const firstReposButton = screen.getByText('Repos').closest('button')
-    expect(firstReposButton).toBeInTheDocument()
+    const firstSessionsButton = screen.getByText('Sessions').closest('button')
+    expect(firstSessionsButton).toBeInTheDocument()
 
     rerender(
       <QueryClientProvider client={queryClient}>
@@ -407,8 +407,8 @@ describe('MobileTabBar', () => {
       </QueryClientProvider>,
     )
 
-    const secondReposButton = screen.getByText('Repos').closest('button')
-    expect(secondReposButton).toBeInTheDocument()
+    const secondSessionsButton = screen.getByText('Sessions').closest('button')
+    expect(secondSessionsButton).toBeInTheDocument()
   })
 
   it('does not render tab bar on SessionDetail path /repos/:id/sessions/:sid', () => {
diff --git a/frontend/src/components/navigation/MobileTabBar.tsx b/frontend/src/components/navigation/MobileTabBar.tsx
index 7fba4cf33..ccc97af36 100644
--- a/frontend/src/components/navigation/MobileTabBar.tsx
+++ b/frontend/src/components/navigation/MobileTabBar.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { FolderGit2, FolderOpen, CalendarClock, Menu, Info, History, Bot, GitCommitHorizontal } from 'lucide-react'
+import { List, FolderOpen, CalendarClock, Menu, Info, History, Bot, GitCommitHorizontal } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useMobile } from '@/hooks/useMobile'
 import { useMobileTabBar } from '@/hooks/useMobileTabBar'
@@ -112,11 +112,11 @@ function buildGlobalTabs({ pathname, openSheet, open, close, navigate, isInsideR
 
   return [
     {
-      key: 'repos',
-      label: 'Repos',
-      icon: FolderGit2,
-      onClick: () => open('repos'),
-      active: openSheet === 'repos' || (pathname === '/' && !openSheet),
+      key: 'sessions',
+      label: 'Sessions',
+      icon: List,
+      onClick: () => open('sessions'),
+      active: openSheet === 'sessions' || (pathname === '/' && !openSheet),
     },
     ...(showsFiles
       ? [{
diff --git a/frontend/src/components/navigation/MoreDrawer.test.tsx b/frontend/src/components/navigation/MoreDrawer.test.tsx
index 60f1bc641..04903a1b2 100644
--- a/frontend/src/components/navigation/MoreDrawer.test.tsx
+++ b/frontend/src/components/navigation/MoreDrawer.test.tsx
@@ -323,28 +323,28 @@ describe('MoreDrawer', () => {
     expect(navigateMock).toHaveBeenCalledWith('/repos/1/schedules?returnTo=%2Frepos%2F1%2Fsessions%2Fsession-1%3Fassistant%3D1')
   })
 
-  it('swaps the menu for the Repos sheet from a session', () => {
+  it('swaps the menu for the Sessions sheet from a session', () => {
     const navigateMock = vi.fn()
     vi.mocked(useNavigate).mockReturnValue(navigateMock)
     mockAuth()
     mockServerHealth()
     renderMoreDrawer({ initialEntry: '/repos/1/sessions/session-1?mobileTab=more', routePath: '/repos/:id/sessions/:sessionId' })
 
-    fireEvent.click(screen.getByText('Repos'))
+    fireEvent.click(screen.getByText('Sessions'))
 
     expect(navigateMock).toHaveBeenCalledWith(
-      { search: 'mobileTab=repos' },
+      { search: 'mobileTab=sessions' },
       { state: { urlParamHistory: { previousSearch: '?mobileTab=more' } } },
     )
   })
 
-  it('keeps Home and hides the Repos row outside a session', () => {
+  it('keeps Home and hides the Sessions row outside a session', () => {
     mockAuth()
     mockServerHealth()
     renderMoreDrawer({ initialEntry: '/repos/1', routePath: '/repos/:id' })
 
     expect(screen.getByText('Home')).toBeInTheDocument()
-    expect(screen.queryByText('Repos')).not.toBeInTheDocument()
+    expect(screen.queryByText('Sessions')).not.toBeInTheDocument()
   })
 
   it('offers the Assistant from a repo session', () => {
@@ -420,7 +420,7 @@ describe('MoreDrawer', () => {
     expect(screen.getByText('Logout')).toBeInTheDocument()
     expect(screen.getByText('Terminal')).toBeInTheDocument()
     expect(screen.getByRole('heading', { name: 'Activity' })).toBeInTheDocument()
-    expect(screen.getByText('Repos')).toBeInTheDocument()
+    expect(screen.getByText('Sessions')).toBeInTheDocument()
     expect(screen.queryByText('Files')).not.toBeInTheDocument()
     expect(screen.getByText('Source Control')).toBeInTheDocument()
     expect(screen.queryByText('Preview')).not.toBeInTheDocument()
diff --git a/frontend/src/components/navigation/MoreDrawer.tsx b/frontend/src/components/navigation/MoreDrawer.tsx
index eb865eba9..e8f4da899 100644
--- a/frontend/src/components/navigation/MoreDrawer.tsx
+++ b/frontend/src/components/navigation/MoreDrawer.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useLocation, useParams } from 'react-router-dom'
 import { useRef, useEffect, type ReactNode } from 'react'
-import { ChevronRight, FolderGit2, X, GitBranch, type LucideIcon } from 'lucide-react'
+import { ChevronRight, List, X, GitBranch, type LucideIcon } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'
 import { useServerHealth } from '@/hooks/useServerHealth'
 import { useUrlParams } from '@/hooks/useUrlParams'
@@ -211,7 +211,7 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
           )}
           <MenuSection>
             {(isSessionDetail || isRemoteSessionDetail) && (
-              <MenuRow icon={FolderGit2} label="Repos" onClick={() => openMobileSheet('repos')} trailing />
+              <MenuRow icon={List} label="Sessions" onClick={() => openMobileSheet('sessions')} trailing />
             )}
             {assistantCta?.to && (
               <MenuRow icon={assistantCta.icon} label={assistantCta.label} onClick={() => navigate(assistantCta.to!)} />
diff --git a/frontend/src/components/navigation/RemoteProjectNav.test.tsx b/frontend/src/components/navigation/RemoteProjectNav.test.tsx
index 33b0181b2..1e12c8d68 100644
--- a/frontend/src/components/navigation/RemoteProjectNav.test.tsx
+++ b/frontend/src/components/navigation/RemoteProjectNav.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { OpenCodeProject } from '@/api/opencode'
@@ -21,7 +21,10 @@ const mocks = vi.hoisted(() => ({
   useOpenCodeServerStatuses: vi.fn(),
   useSessionsAcrossDirectories: vi.fn(),
   useCreateSession: vi.fn(),
-  sessionsCalls: [] as Array<{ directories: string[]; options?: { serverId?: string } }>,
+  sessionsCalls: [] as Array<{
+    directories: string[]
+    options?: { serverId?: string; allDirectories?: boolean; limit?: number }
+  }>,
   createCalls: [] as Array<{ directory?: string; serverId?: string }>,
   sessions: [] as SessionFixture[],
   hasNextPage: { current: false },
@@ -43,11 +46,13 @@ vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
     ...actual,
     useSessionsAcrossDirectories: (
       directories: string[],
-      options?: { serverId?: string },
+      options?: { serverId?: string; allDirectories?: boolean; limit?: number },
     ) => {
       mocks.sessionsCalls.push({ directories, options })
       return {
-        data: mocks.sessions.filter((session) => directories.includes(session.location.directory)),
+        data: options?.allDirectories
+          ? mocks.sessions
+          : mocks.sessions.filter((session) => directories.includes(session.location.directory)),
         isLoading: false,
         isError: false,
         hasNextPage: mocks.hasNextPage.current,
@@ -87,14 +92,19 @@ const kitchen = {
   updatedAt: 2,
 }
 
-function createProject(id: string, name: string | undefined, canonical: string): OpenCodeProject {
+function createProject(
+  id: string,
+  name: string | undefined,
+  canonical: string,
+  time: OpenCodeProject['time'] = { created: 1, updated: 2, active: 0 },
+): OpenCodeProject {
   return {
     id,
     canonical,
     name,
-    time: { created: 1, updated: 2 },
+    time,
     sandboxes: [],
-  } as OpenCodeProject
+  }
 }
 
 function createSession(id: string, directory: string, updated = Date.now()): SessionFixture {
@@ -117,10 +127,12 @@ function LocationSpy() {
   return <div data-testid="location">{`${pathname}${search}`}</div>
 }
 
-function createWrapper(initialEntry: string) {
-  const queryClient = new QueryClient({
+function createWrapper(
+  initialEntry: string,
+  queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
-  })
+  }),
+) {
   return ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={[initialEntry]}>
@@ -187,6 +199,28 @@ describe('RemoteProjectNavList', () => {
     expect(mocks.listProjects).toHaveBeenCalledWith('srv_kitchen')
   })
 
+  it('orders projects by their newest session and ignores the project activity time', async () => {
+    mocks.listProjects.mockResolvedValue([
+      createProject('p1', 'Alpha', '/projects/alpha', { created: 1, updated: 900, active: 999 }),
+      createProject('p2', 'Beta', '/projects/beta', { created: 1, updated: 100, active: 1 }),
+    ])
+    mocks.sessions = [createSession('b1', '/projects/beta', 500)]
+
+    render(<RemoteListHarness serverId="srv_kitchen" />, { wrapper: createWrapper('/') })
+
+    await screen.findByText('Beta')
+    const toggles = screen
+      .getAllByRole('button', { name: /^Show sessions in / })
+      .map((button) => button.getAttribute('aria-label'))
+    expect(toggles).toEqual(['Show sessions in Beta', 'Show sessions in Alpha'])
+    expect(
+      mocks.sessionsCalls.filter((call) => call.options?.allDirectories === true),
+    ).toHaveLength(1)
+    expect(
+      mocks.sessionsCalls.find((call) => call.options?.allDirectories === true)?.options,
+    ).toMatchObject({ serverId: 'srv_kitchen', limit: 100 })
+  })
+
   it('expands the project of the current project route and loads its sessions', async () => {
     render(<RemoteListHarness serverId="srv_kitchen" />, {
       wrapper: createWrapper('/servers/srv_kitchen/projects?directory=%2Fprojects%2Falpha'),
@@ -287,6 +321,28 @@ describe('RemoteProjectNavList', () => {
     expect(await screen.findByText('Could not load projects')).toBeInTheDocument()
   })
 
+  it('keeps the cached project list when a refetch fails', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    })
+    mocks.listProjects.mockResolvedValueOnce([alpha, beta]).mockRejectedValueOnce(new Error('offline'))
+
+    render(<RemoteListHarness serverId="srv_kitchen" />, {
+      wrapper: createWrapper('/', queryClient),
+    })
+
+    await screen.findByText('Alpha')
+    await act(async () => {
+      await queryClient.refetchQueries()
+    })
+
+    await waitFor(() => {
+      expect(mocks.listProjects).toHaveBeenCalledTimes(2)
+    })
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.queryByText('Could not load projects')).not.toBeInTheDocument()
+  })
+
   it('reports an unreachable server on a failed project load', async () => {
     mocks.listProjects.mockRejectedValue(new Error('offline'))
     mocks.useOpenCodeServerStatuses.mockReturnValue({
diff --git a/frontend/src/components/navigation/RemoteProjectNav.tsx b/frontend/src/components/navigation/RemoteProjectNav.tsx
index d3b733911..e1c8f764e 100644
--- a/frontend/src/components/navigation/RemoteProjectNav.tsx
+++ b/frontend/src/components/navigation/RemoteProjectNav.tsx
@@ -1,21 +1,18 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import { listProjects, type OpenCodeProject } from '@/api/opencode'
+import { remoteProjectName, type OpenCodeProject } from '@/api/opencode'
 import type { Session } from '@/api/types'
 import { ActivityStateIndicator } from '@/components/activity/ActivityStateIndicator'
-import { useSessionsAcrossDirectories, sessionQueryOptions } from '@/hooks/useOpenCode'
+import { useSessionsAcrossDirectories } from '@/hooks/useOpenCode'
+import { useActiveRemoteDirectory } from '@/hooks/useActiveRemoteDirectory'
+import { useRemoteProjectsByActivity } from '@/hooks/useRemoteProjects'
 import { useOpenCodeServers, useOpenCodeServerStatuses } from '@/hooks/useOpenCodeServers'
 import { useProjectActivityState } from '@/hooks/useActiveWork'
 import { useSessionSearch } from '@/hooks/useSessionSearch'
-import { serverScopedKey } from '@/lib/serverScope'
 import {
   getServerProjectPath,
   getServerSessionPath,
-  parseServerProjectRoute,
-  parseServerSessionRoute,
 } from '@/lib/navigation'
-import { getDirectoryName } from '@/lib/utils'
 import { getSessionKey } from '@/lib/sessionKey'
 import {
   NewSessionButton,
@@ -31,10 +28,6 @@ import {
   type SidebarSessionItem,
 } from '@/components/navigation/sidebar-session-tree'
 
-function projectName(project: OpenCodeProject): string {
-  return project.name?.trim() || getDirectoryName(project.canonical)
-}
-
 function buildRemoteItem(session: Session, serverId: string, projectLabel: string): SidebarSessionItem {
   return {
     key: getSessionKey(session),
@@ -55,20 +48,6 @@ function RemoteProjectActivityIndicator({ serverId, directory }: { serverId: str
   return <ActivityStateIndicator state={state} />
 }
 
-function useActiveRemoteDirectory(serverId: string): string | null {
-  const { pathname, search } = useLocation()
-  const projectRoute = parseServerProjectRoute(pathname, search)
-  const sessionRoute = parseServerSessionRoute(pathname)
-  const sessionID = sessionRoute?.serverId === serverId ? sessionRoute.sessionId : undefined
-  const { data: session } = useQuery({
-    ...sessionQueryOptions(sessionID, undefined, serverId),
-    enabled: Boolean(sessionID),
-  })
-
-  if (projectRoute?.serverId === serverId) return projectRoute.directory
-  return session?.location.directory ?? null
-}
-
 interface RemoteSessionRowsProps {
   serverId: string
   projectLabel: string
@@ -135,7 +114,7 @@ function RemoteProjectSessions({ serverId, project, onSelectSession }: RemotePro
   return (
     <RemoteSessionRows
       serverId={serverId}
-      projectLabel={projectName(project)}
+      projectLabel={remoteProjectName(project)}
       sessions={data}
       isLoading={isLoading}
       isError={isError}
@@ -167,7 +146,7 @@ function RemoteProjectGroup({
   onSelectSession,
   children,
 }: RemoteProjectGroupProps) {
-  const name = projectName(project)
+  const name = remoteProjectName(project)
 
   return (
     <RepoNavGroup
@@ -290,7 +269,7 @@ function RemoteProjectSearchResults({
     () =>
       projects.filter(
         (project) =>
-          projectName(project).toLowerCase().includes(needle) ||
+          remoteProjectName(project).toLowerCase().includes(needle) ||
           project.canonical.toLowerCase().includes(needle),
       ),
     [projects, needle],
@@ -342,7 +321,7 @@ function RemoteProjectSearchResults({
             {matchedSessions ? (
               <RemoteSessionRows
                 serverId={serverId}
-                projectLabel={projectName(project)}
+                projectLabel={remoteProjectName(project)}
                 sessions={matchedSessions}
                 isLoading={false}
                 isError={false}
@@ -384,23 +363,17 @@ export function RemoteProjectNavList({
   const { servers, isLoading: isServersLoading } = useOpenCodeServers()
   const { statusById } = useOpenCodeServerStatuses()
   const server = servers.find((candidate) => candidate.id === serverId)
-  const activeDirectory = useActiveRemoteDirectory(serverId)
-
-  const projectsQuery = useQuery({
-    queryKey: serverScopedKey(['opencode', 'projects'], serverId),
-    queryFn: () => listProjects(serverId),
-    enabled: server?.enabled === true,
-    retry: false,
-  })
+  const { directory: activeDirectory } = useActiveRemoteDirectory(serverId)
 
-  const projects = useMemo(() => projectsQuery.data ?? [], [projectsQuery.data])
+  const { projects, isLoading: projectsLoading, isError: projectsError, hasData: hasProjects } =
+    useRemoteProjectsByActivity(serverId)
   const trimmedSearch = search.trim()
 
   if (isServersLoading) return <SessionNavStatus>Loading projects...</SessionNavStatus>
   if (!server) return <SessionNavStatus>Server not found</SessionNavStatus>
   if (!server.enabled) return <SessionNavStatus>Server is disabled</SessionNavStatus>
-  if (projectsQuery.isLoading) return <SessionNavStatus>Loading projects...</SessionNavStatus>
-  if (projectsQuery.isError) {
+  if (projectsLoading) return <SessionNavStatus>Loading projects...</SessionNavStatus>
+  if (projectsError && !hasProjects) {
     return (
       <SessionNavStatus>
         {statusById[serverId]?.connected === false ? 'Server unreachable' : 'Could not load projects'}
diff --git a/frontend/src/components/navigation/RepoQuickSwitchSheet.test.tsx b/frontend/src/components/navigation/RepoQuickSwitchSheet.test.tsx
deleted file mode 100644
index 6d2260c13..000000000
--- a/frontend/src/components/navigation/RepoQuickSwitchSheet.test.tsx
+++ /dev/null
@@ -1,1128 +0,0 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, it, expect, vi } from 'vitest'
-import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { RepoQuickSwitchSheet } from './RepoQuickSwitchSheet'
-import { getRepoSiblings, listRepos } from '@/api/repos'
-import { stubMatchMedia } from '@/test/test-utils'
-import { listProjects, type OpenCodeProject } from '@/api/opencode'
-import { useMobileTabBar } from '@/hooks/useMobileTabBar'
-import { ASSISTANT_REPO_ID } from '@opencode-manager/shared/utils'
-import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
-import { useSidebarServerStore } from '@/stores/sidebarServerStore'
-import type { ActiveWorkItem } from '@/lib/activeWork'
-
-type SessionFixture = {
-  id: string
-  projectID: string
-  title: string
-  time: { created: number; updated: number }
-  location: { directory: string }
-  cost: number
-  tokens: { input: number; output: number; reasoning: number; cache: { read: number; write: number } }
-}
-
-const { sessionsData, sessionsHookCalls, permissionSessions, createSessionDirectories } = vi.hoisted(() => ({
-  sessionsData: [] as Array<{
-    id: string
-    projectID: string
-    title: string
-    time: { created: number; updated: number }
-    location: { directory: string }
-    cost: number
-    tokens: { input: number; output: number; reasoning: number; cache: { read: number; write: number } }
-  }>,
-  sessionsHookCalls: [] as string[][],
-  permissionSessions: { current: new Set<string>() },
-  createSessionDirectories: [] as string[],
-}))
-
-const activityMocks = vi.hoisted(() => ({
-  useActiveWork: vi.fn(),
-  useActivityWindowMinutes: vi.fn(),
-}))
-
-const serverMocks = vi.hoisted(() => ({
-  useOpenCodeServers: vi.fn(),
-  useOpenCodeServerStatuses: vi.fn(),
-}))
-
-vi.mock('@/hooks/useOpenCodeServers', () => ({
-  useOpenCodeServers: serverMocks.useOpenCodeServers,
-  useOpenCodeServerStatuses: serverMocks.useOpenCodeServerStatuses,
-}))
-
-vi.mock('@/hooks/useActiveWork', () => ({
-  useActiveWork: activityMocks.useActiveWork,
-  useActivityWindowMinutes: activityMocks.useActivityWindowMinutes,
-  useRepoActivityState: () => null,
-  useServerActivityState: () => null,
-  useLocalActivityState: () => null,
-  useProjectActivityState: () => null,
-}))
-
-vi.mock('@/api/repos')
-
-vi.mock('@/api/opencode', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/api/opencode')>()
-  return { ...actual, listProjects: vi.fn() }
-})
-
-vi.mock('@/contexts/EventContext', () => ({
-  usePermissions: () => ({
-    hasForSession: (id: string) => permissionSessions.current.has(id),
-  }),
-  useForms: () => ({ hasForSession: () => false }),
-}))
-
-vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/hooks/useOpenCode')>()
-  return {
-    ...actual,
-    useSessionsAcrossDirectories: (directories: string[]) => {
-      sessionsHookCalls.push(directories)
-      return { data: sessionsData, isLoading: false, isError: false }
-    },
-    useCreateSession: (directory: string, onSuccess?: (session: { id: string }) => void) => ({
-      mutate: () => {
-        createSessionDirectories.push(directory)
-        onSuccess?.({ id: 'new-session' })
-      },
-    }),
-  }
-})
-
-vi.mock('@/hooks/useSessionPins', () => ({
-  useSessionPins: () => ({ data: [] }),
-}))
-
-function createSession(id: string, updated: number, directory: string): SessionFixture {
-  return {
-    id,
-    projectID: 'proj-1',
-    title: `Session ${id}`,
-    time: { created: updated - 10000, updated },
-    location: { directory },
-    cost: 0,
-    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
-  }
-}
-
-function createRepo(id: number, name: string, fullPath: string) {
-  return {
-    id,
-    name,
-    repoUrl: `https://github.com/test/${name}.git`,
-    localPath: fullPath,
-    fullPath,
-    sourcePath: null,
-    currentBranch: 'main',
-    defaultBranch: 'main',
-    cloneStatus: 'ready' as const,
-    clonedAt: 0,
-    isLocal: false,
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-  }
-}
-
-function createActiveWorkItem(): ActiveWorkItem {
-  const session = createSession('s1', Date.now(), '/path/to/repo1')
-  return {
-    key: '1:s1',
-    state: 'recent',
-    session,
-    repo: createRepo(1, 'repo1', '/path/to/repo1'),
-    updatedAt: session.time.updated,
-    path: '/repos/1/sessions/s1',
-  }
-}
-
-function setActivityGroups(groups: {
-  needsInput?: ActiveWorkItem[]
-  running?: ActiveWorkItem[]
-  recent?: ActiveWorkItem[]
-}) {
-  activityMocks.useActiveWork.mockReturnValue({
-    groups: {
-      needsInput: groups.needsInput ?? [],
-      running: groups.running ?? [],
-      recent: groups.recent ?? [],
-    },
-    isLoading: false,
-    isError: false,
-  })
-}
-
-function createLinkedServer(id: string, name: string, enabled = true) {
-  return {
-    id,
-    name,
-    baseUrl: `https://${id}.example.com`,
-    username: 'opencode',
-    enabled,
-    hasPassword: true,
-    createdAt: 1,
-    updatedAt: 2,
-  }
-}
-
-function createProject(id: string, name: string, canonical: string): OpenCodeProject {
-  return {
-    id,
-    canonical,
-    name,
-    time: { created: 1, updated: 2 },
-    sandboxes: [],
-  } as OpenCodeProject
-}
-
-function setLinkedServers(servers: Array<ReturnType<typeof createLinkedServer>>) {
-  serverMocks.useOpenCodeServers.mockReturnValue({ servers, isLoading: false })
-  serverMocks.useOpenCodeServerStatuses.mockReturnValue({
-    statuses: [],
-    statusById: Object.fromEntries(
-      servers.map((server) => [
-        server.id,
-        { serverId: server.id, connected: true, version: null, error: null },
-      ]),
-    ),
-    isLoading: false,
-  })
-}
-
-function createWrapper() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  })
-  return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter>
-        {children}
-      </MemoryRouter>
-    </QueryClientProvider>
-  )
-}
-
-function LocationSpy() {
-  const { pathname, search } = useLocation()
-  return <div data-testid="location">{`${pathname}${search}`}</div>
-}
-
-function MobileSheetHarness() {
-  const { close } = useMobileTabBar()
-  return (
-    <>
-      <RepoQuickSwitchSheet isOpen onClose={close} />
-      <LocationSpy />
-    </>
-  )
-}
-
-describe('RepoQuickSwitchSheet', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    localStorage.clear()
-    useSidebarServerStore.setState({ serverId: LOCAL_OPENCODE_SERVER_ID })
-    vi.mocked(getRepoSiblings).mockResolvedValue([])
-    vi.mocked(listProjects).mockResolvedValue([])
-    sessionsData.splice(0, sessionsData.length)
-    sessionsHookCalls.splice(0, sessionsHookCalls.length)
-    permissionSessions.current.clear()
-    activityMocks.useActivityWindowMinutes.mockReturnValue(30)
-    setActivityGroups({})
-    setLinkedServers([])
-    stubMatchMedia(true)
-  })
-
-  it('renders with loading state', async () => {
-    vi.mocked(listRepos).mockImplementation(() => new Promise(() => {}))
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-    await waitFor(() => {
-      expect(screen.getByPlaceholderText('Search repos...')).toBeInTheDocument()
-    })
-  })
-
-  it('renders empty state when no repos', async () => {
-    vi.mocked(listRepos).mockResolvedValue([])
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-    await waitFor(() => {
-      expect(screen.getByText('No repos found')).toBeInTheDocument()
-    })
-  })
-
-  it('renders repo list and filters on search', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        repoUrl: 'https://github.com/test/repo2.git',
-        localPath: '/path/to/repo2',
-        sourcePath: null,
-        currentBranch: 'develop',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-      expect(screen.getByText('repo2')).toBeInTheDocument()
-    })
-    const input = screen.getByPlaceholderText('Search repos...')
-    fireEvent.change(input, { target: { value: 'repo1' } })
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-      expect(screen.queryByText('repo2')).not.toBeInTheDocument()
-    })
-  })
-
-  it('distinguishes worktrees of the same repo by branch', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1/.worktrees/feature-a',
-        sourcePath: null,
-        currentBranch: 'feature-a',
-        isWorktree: true,
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 3,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1/.worktrees/feature-b',
-        sourcePath: null,
-        currentBranch: 'feature-b',
-        isWorktree: true,
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-    await waitFor(() => {
-      expect(screen.getAllByText('repo1')).toHaveLength(3)
-      expect(screen.getByText('feature-a')).toBeInTheDocument()
-      expect(screen.getByText('feature-b')).toBeInTheDocument()
-    })
-  })
-
-  it('shows assistant as the first repo option', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: ASSISTANT_REPO_ID,
-        repoUrl: 'Assistant',
-        localPath: '/assistant',
-        sourcePath: null,
-        currentBranch: null,
-        isLocal: true,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    const repoNames = screen.getAllByText(/^(Assistant|repo1)$/).map((node) => node.textContent)
-    expect(repoNames).toEqual(['Assistant', 'repo1'])
-  })
-
-  it('navigates on repo click and closes sheet', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={handleClose} />,
-      { wrapper: createWrapper() },
-    )
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-    fireEvent.click(screen.getByText('repo1'))
-    expect(handleClose).toHaveBeenCalled()
-  })
-
-  it('navigates to assistant when mobileTabAction is assistant', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/schedules?mobileTab=repos&mobileTabAction=assistant']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    fireEvent.click(screen.getByText('repo1'))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/assistant')
-    expect(handleClose).not.toHaveBeenCalled()
-  })
-
-  it('navigates from assistant to repo detail when clicking repo on canonical assistant route', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/assistant?mobileTab=repos']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    fireEvent.click(screen.getByText('repo1'))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/1')
-    expect(handleClose).not.toHaveBeenCalled()
-  })
-
-  it('navigates from legacy assistant route to repo detail when clicking repo', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1/assistant?mobileTab=repos']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    fireEvent.click(screen.getByText('repo1'))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/1')
-    expect(handleClose).not.toHaveBeenCalled()
-  })
-
-  it('does not mark any repo active on /assistant', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        repoUrl: 'https://github.com/test/repo2.git',
-        localPath: '/path/to/repo2',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/assistant?mobileTab=repos']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-      expect(screen.getByText('repo2')).toBeInTheDocument()
-    })
-
-    expect(screen.queryByRole('button', { current: 'page' })).toBeNull()
-  })
-
-  it('does not mark any repo active on legacy /repos/1/assistant', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        repoUrl: 'https://github.com/test/repo2.git',
-        localPath: '/path/to/repo2',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-    const handleClose = vi.fn()
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1/assistant?mobileTab=repos']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-      expect(screen.getByText('repo2')).toBeInTheDocument()
-    })
-
-    expect(screen.queryByRole('button', { current: 'page' })).toBeNull()
-  })
-
-  it('switches repos from the mobile repos sheet without navigating back to the previous repo', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      {
-        id: 1,
-        repoUrl: 'https://github.com/test/repo1.git',
-        localPath: '/path/to/repo1',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-      {
-        id: 2,
-        repoUrl: 'https://github.com/test/repo2.git',
-        localPath: '/path/to/repo2',
-        sourcePath: null,
-        currentBranch: 'main',
-        isLocal: false,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      },
-    ])
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1?mobileTab=repos']}>
-          <Routes>
-            <Route path="*" element={<MobileSheetHarness />} />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo2')).toBeInTheDocument()
-    })
-
-    fireEvent.click(screen.getByText('repo2'))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/2')
-  })
-
-  it('does not render sessions for collapsed repos and does not fetch them', async () => {
-    const now = Date.now()
-    vi.mocked(listRepos).mockResolvedValue([
-      createRepo(1, 'repo1', '/path/to/repo1'),
-      createRepo(2, 'repo2', '/path/to/repo2'),
-    ])
-    sessionsData.push(createSession('s1', now, '/path/to/repo1'))
-
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={vi.fn()} />,
-      { wrapper: createWrapper() },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-      expect(screen.getByText('repo2')).toBeInTheDocument()
-    })
-
-    expect(screen.queryByText('Session s1')).not.toBeInTheDocument()
-    expect(sessionsHookCalls.some((directories) => directories.includes('/path/to/repo1'))).toBe(false)
-  })
-
-  it('expands a repo to show its sessions', async () => {
-    const now = Date.now()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    sessionsData.push(createSession('s1', now, '/path/to/repo1'))
-
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={vi.fn()} />,
-      { wrapper: createWrapper() },
-    )
-
-    const toggle = await screen.findByRole('button', { name: 'Show sessions in repo1' })
-    expect(toggle).toHaveAttribute('aria-expanded', 'false')
-
-    fireEvent.click(toggle)
-
-    expect(await screen.findByText('Session s1')).toBeInTheDocument()
-    expect(toggle).toHaveAttribute('aria-expanded', 'true')
-    expect(sessionsHookCalls.some((directories) => directories.includes('/path/to/repo1'))).toBe(true)
-  })
-
-  it('navigates to a session when it is tapped', async () => {
-    const now = Date.now()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    sessionsData.push(createSession('s1', now, '/path/to/repo1'))
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/?mobileTab=repos']}>
-          <Routes>
-            <Route path="*" element={<MobileSheetHarness />} />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    fireEvent.click(await screen.findByRole('button', { name: 'Show sessions in repo1' }))
-    fireEvent.click(await screen.findByText('Session s1'))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/1/sessions/s1')
-  })
-
-  it('expands the active repo by default and shows its sessions', async () => {
-    const now = Date.now()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    sessionsData.push(createSession('s1', now, '/path/to/repo1'))
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1']}>
-          <Routes>
-            <Route path="*" element={<MobileSheetHarness />} />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    expect(await screen.findByText('Session s1')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Show sessions in repo1' })).toHaveAttribute(
-      'aria-expanded',
-      'true',
-    )
-  })
-
-  it('clears the search with the clear button', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      createRepo(1, 'repo1', '/path/to/repo1'),
-      createRepo(2, 'repo2', '/path/to/repo2'),
-    ])
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    const input = await screen.findByPlaceholderText('Search repos...')
-    await waitFor(() => expect(screen.getByText('repo2')).toBeInTheDocument())
-    expect(screen.queryByLabelText('Clear search')).toBeNull()
-
-    fireEvent.change(input, { target: { value: 'repo1' } })
-    expect(screen.queryByText('repo2')).toBeNull()
-
-    fireEvent.click(screen.getByLabelText('Clear search'))
-
-    expect(input).toHaveValue('')
-    expect(screen.getByText('repo2')).toBeInTheDocument()
-    expect(screen.queryByLabelText('Clear search')).toBeNull()
-  })
-
-  it('keeps only one repo expanded at a time', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      createRepo(1, 'repo1', '/path/to/repo1'),
-      createRepo(2, 'repo2', '/path/to/repo2'),
-    ])
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1?mobileTab=repos']}>
-          <Routes>
-            <Route path="*" element={<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />} />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    const repo1Toggle = await screen.findByRole('button', { name: 'Show sessions in repo1' })
-    const repo2Toggle = screen.getByRole('button', { name: 'Show sessions in repo2' })
-
-    expect(repo1Toggle).toHaveAttribute('aria-expanded', 'true')
-    expect(repo2Toggle).toHaveAttribute('aria-expanded', 'false')
-    expect(screen.queryByText('HERE')).toBeNull()
-    expect(screen.getByText('repo1').closest('button')).toHaveAttribute('aria-current', 'page')
-
-    fireEvent.click(repo2Toggle)
-
-    expect(repo1Toggle).toHaveAttribute('aria-expanded', 'false')
-    expect(repo2Toggle).toHaveAttribute('aria-expanded', 'true')
-
-    fireEvent.click(repo2Toggle)
-
-    expect(repo1Toggle).toHaveAttribute('aria-expanded', 'false')
-    expect(repo2Toggle).toHaveAttribute('aria-expanded', 'false')
-  })
-
-  it('makes the expanded repo header sticky and leaves collapsed headers static', async () => {
-    vi.mocked(listRepos).mockResolvedValue([
-      createRepo(1, 'repo1', '/path/to/repo1'),
-      createRepo(2, 'repo2', '/path/to/repo2'),
-    ])
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1?mobileTab=repos']}>
-          <Routes>
-            <Route path="*" element={<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />} />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    const expandedToggle = await screen.findByRole('button', { name: 'Show sessions in repo1' })
-    const collapsedToggle = screen.getByRole('button', { name: 'Show sessions in repo2' })
-
-    expect(expandedToggle.parentElement).toHaveClass('sticky')
-    expect(collapsedToggle.parentElement).not.toHaveClass('sticky')
-  })
-
-  it('renders a pending permission indicator on a session row', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    sessionsData.push(createSession('s1', Date.now(), '/path/to/repo1'))
-    permissionSessions.current.add('s1')
-
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={vi.fn()} />,
-      { wrapper: createWrapper() },
-    )
-
-    fireEvent.click(await screen.findByRole('button', { name: 'Show sessions in repo1' }))
-
-    expect(await screen.findByLabelText('Pending permission')).toBeInTheDocument()
-  })
-
-  it('renders the relative time on a session row', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    sessionsData.push(createSession('s1', Date.now() - 5 * 60_000, '/path/to/repo1'))
-
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={vi.fn()} />,
-      { wrapper: createWrapper() },
-    )
-
-    fireEvent.click(await screen.findByRole('button', { name: 'Show sessions in repo1' }))
-
-    expect(await screen.findByText('5m ago')).toBeInTheDocument()
-  })
-
-  it('renders a closing spacer at the end of the scroll area', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-
-    render(
-      <RepoQuickSwitchSheet isOpen onClose={vi.fn()} />,
-      { wrapper: createWrapper() },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    expect(document.body.querySelector('[aria-hidden="true"].h-16')).not.toBeNull()
-  })
-
-  it('renders the Activity section above the repo list when there are items', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    setActivityGroups({ recent: [createActiveWorkItem()] })
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    const heading = screen.getByRole('heading', { name: 'Activity' })
-    const repo = screen.getByText('repo1')
-    expect(screen.getByText('Session s1')).toBeInTheDocument()
-    expect(heading.compareDocumentPosition(repo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
-  })
-
-  it('hides the Activity section when there are no items', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    setActivityGroups({})
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    expect(screen.queryByRole('heading', { name: 'Activity' })).toBeNull()
-    expect(screen.queryByText('Session s1')).toBeNull()
-  })
-
-  it('hides the Activity section while a search query is entered', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    setActivityGroups({ recent: [createActiveWorkItem()] })
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    expect(await screen.findByRole('heading', { name: 'Activity' })).toBeInTheDocument()
-
-    fireEvent.change(screen.getByPlaceholderText('Search repos...'), { target: { value: 'repo' } })
-
-    expect(screen.queryByRole('heading', { name: 'Activity' })).toBeNull()
-    expect(screen.queryByText('Session s1')).toBeNull()
-  })
-
-  it('navigates to the item path and closes the sheet when an activity row is clicked', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    setActivityGroups({ recent: [createActiveWorkItem()] })
-    const handleClose = vi.fn()
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    fireEvent.click(await screen.findByRole('button', { name: /Session s1/ }))
-
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/1/sessions/s1')
-    expect(handleClose).toHaveBeenCalled()
-  })
-
-  it('starts a new session in a repo, opens it and closes the sheet', async () => {
-    createSessionDirectories.splice(0, createSessionDirectories.length)
-    vi.mocked(listRepos).mockResolvedValue([
-      createRepo(1, 'repo1', '/path/to/repo1'),
-      createRepo(2, 'repo2', '/path/to/repo2'),
-    ])
-    const handleClose = vi.fn()
-    let pathname = ''
-    function LocationProbe() {
-      pathname = useLocation().pathname
-      return null
-    }
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1']}>
-          <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-          <LocationProbe />
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    fireEvent.click(await screen.findByRole('button', { name: 'New session in repo2' }))
-
-    expect(createSessionDirectories).toEqual(['/path/to/repo2'])
-    expect(pathname).toBe('/repos/2/sessions/new-session')
-    expect(handleClose).toHaveBeenCalled()
-  })
-
-  it('renders the server switcher when enabled linked servers exist', async () => {
-    const user = userEvent.setup()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    setLinkedServers([
-      createLinkedServer('srv_kitchen', 'Kitchen'),
-      createLinkedServer('srv_office', 'Office', false),
-    ])
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    const trigger = await screen.findByRole('button', { name: 'Switch server, current: OC Manager' })
-    expect(trigger).toBeInTheDocument()
-    expect(screen.queryByRole('heading', { name: 'Servers' })).not.toBeInTheDocument()
-
-    await user.click(trigger)
-
-    expect(await screen.findByRole('menuitem', { name: /Kitchen/ })).toBeInTheDocument()
-    expect(screen.queryByRole('menuitem', { name: /Office/ })).not.toBeInTheDocument()
-    expect(screen.getByRole('img', { name: 'Connected' })).toBeInTheDocument()
-  })
-
-  it('hides the server switcher when no linked servers exist', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    await waitFor(() => {
-      expect(screen.getByText('repo1')).toBeInTheDocument()
-    })
-
-    expect(screen.queryByRole('button', { name: /Switch server/ })).toBeNull()
-  })
-
-  it('switches to a linked server without navigating or closing the sheet', async () => {
-    const user = userEvent.setup()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    vi.mocked(listProjects).mockResolvedValue([createProject('p1', 'Alpha', '/projects/alpha')])
-    setLinkedServers([createLinkedServer('srv_kitchen', 'Kitchen')])
-    const handleClose = vi.fn()
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await user.click(await screen.findByRole('button', { name: 'Switch server, current: OC Manager' }))
-    await user.click(await screen.findByRole('menuitem', { name: /Kitchen/ }))
-
-    expect(await screen.findByText('Alpha')).toBeInTheDocument()
-    expect(screen.queryByText('repo1')).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /Add repository/ })).not.toBeInTheDocument()
-    expect(screen.getByTestId('location')).toHaveTextContent('/repos/1')
-    expect(handleClose).not.toHaveBeenCalled()
-  })
-
-  it('opens a remote project from the sheet and closes it', async () => {
-    const user = userEvent.setup()
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    vi.mocked(listProjects).mockResolvedValue([createProject('p1', 'Alpha', '/projects/alpha')])
-    setLinkedServers([createLinkedServer('srv_kitchen', 'Kitchen')])
-    const handleClose = vi.fn()
-
-    render(
-      <QueryClientProvider client={new QueryClient()}>
-        <MemoryRouter initialEntries={['/repos/1']}>
-          <Routes>
-            <Route
-              path="*"
-              element={
-                <>
-                  <RepoQuickSwitchSheet isOpen onClose={handleClose} />
-                  <LocationSpy />
-                </>
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </QueryClientProvider>,
-    )
-
-    await user.click(await screen.findByRole('button', { name: 'Switch server, current: OC Manager' }))
-    await user.click(await screen.findByRole('menuitem', { name: /Kitchen/ }))
-    await user.click(await screen.findByRole('button', { name: /^Alpha/ }))
-
-    expect(screen.getByTestId('location')).toHaveTextContent(
-      '/servers/srv_kitchen/projects?directory=%2Fprojects%2Falpha',
-    )
-    expect(handleClose).toHaveBeenCalled()
-  })
-
-  it('leaves the search input unfocused on touch screens so the keyboard stays closed', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    stubMatchMedia(false)
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    const input = await screen.findByPlaceholderText('Search repos...')
-    expect(input).not.toHaveFocus()
-  })
-
-  it('focuses the search input when a fine pointer is available', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    stubMatchMedia(true)
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    const input = await screen.findByPlaceholderText('Search repos...')
-    await waitFor(() => expect(input).toHaveFocus())
-  })
-
-  it('uses project wording for the search placeholder when a linked server is selected', async () => {
-    vi.mocked(listRepos).mockResolvedValue([createRepo(1, 'repo1', '/path/to/repo1')])
-    vi.mocked(listProjects).mockResolvedValue([createProject('p1', 'Alpha', '/projects/alpha')])
-    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
-
-    render(<RepoQuickSwitchSheet isOpen onClose={vi.fn()} />, { wrapper: createWrapper() })
-
-    expect(await screen.findByPlaceholderText('Search projects...')).toBeInTheDocument()
-  })
-})
diff --git a/frontend/src/components/navigation/RepoQuickSwitchSheet.tsx b/frontend/src/components/navigation/RepoQuickSwitchSheet.tsx
deleted file mode 100644
index 94d9c827d..000000000
--- a/frontend/src/components/navigation/RepoQuickSwitchSheet.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { useState, useMemo } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
-import { useRefreshOnOpen } from '@/hooks/useRefreshOnOpen'
-import { FINE_POINTER_MEDIA_QUERY, useMediaQuery } from '@/hooks/useMediaQuery'
-import { Input } from '@/components/ui/input'
-import { BottomSheet, BottomSheetHeader, BottomSheetContent } from '@/components/ui/bottom-sheet'
-import { Button } from '@/components/ui/button'
-import { CompactActivityList } from '@/components/activity/CompactActivityList'
-import { getRepoDisplayName } from '@/lib/utils'
-import { AddRepoDialog } from '@/components/repo/AddRepoDialog'
-import { FolderGit2, Plus } from 'lucide-react'
-import { useUrlParams } from '@/hooks/useUrlParams'
-import { getAssistantPath, getRepoPath, getSessionPath } from '@/lib/navigation'
-import { NewSessionButton, RepoSessionNavList, SearchClearButton } from '@/components/navigation/RepoSessionNav'
-import { LinkedServersNav } from '@/components/navigation/LinkedServersNav'
-import { RemoteProjectNavList } from '@/components/navigation/RemoteProjectNav'
-import { getActiveRepoId } from '@/components/navigation/sidebar-session-tree'
-import { useNavigableRepos } from '@/hooks/useSidebarRepoGroups'
-import { useSidebarServerSelection } from '@/hooks/useSidebarServerSelection'
-
-interface RepoQuickSwitchSheetProps {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export function RepoQuickSwitchSheet({ isOpen, onClose }: RepoQuickSwitchSheetProps) {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { searchParams } = useUrlParams()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [addRepoOpen, setAddRepoOpen] = useState(false)
-  const [selectedServerId] = useSidebarServerSelection()
-  const isRemote = selectedServerId !== LOCAL_OPENCODE_SERVER_ID
-  const activeRepoId = getActiveRepoId(location.pathname)
-  const hasFinePointer = useMediaQuery(FINE_POINTER_MEDIA_QUERY)
-
-  const { repos, isLoading, refetch } = useNavigableRepos(isOpen)
-
-  useRefreshOnOpen(isOpen, refetch)
-
-  const filteredRepos = useMemo(() => {
-    if (!searchQuery.trim()) return repos
-    const query = searchQuery.toLowerCase()
-    return repos.filter((repo) =>
-      getRepoDisplayName(repo).toLowerCase().includes(query)
-    )
-  }, [repos, searchQuery])
-
-  const isUrlControlledSheet = searchParams.get('mobileTab') === 'repos'
-
-  const navigateAndClose = (path: string, options?: { replace?: boolean }) => {
-    navigate(path, options)
-    if (!isUrlControlledSheet) {
-      onClose()
-    }
-  }
-
-  const handleClick = (id: number) => {
-    if (searchParams.get('mobileTabAction') === 'assistant') {
-      navigateAndClose(getAssistantPath(), { replace: true })
-      return
-    }
-
-    if (id === activeRepoId) {
-      onClose()
-      return
-    }
-
-    navigateAndClose(getRepoPath(id), { replace: true })
-  }
-
-  return (
-    <>
-      <BottomSheet isOpen={isOpen} onClose={onClose} heightClass="h-[70dvh]" ariaLabel="Switch repo">
-        <BottomSheetHeader className="border-b-0">
-          <div className="flex items-center gap-2">
-            <div className="relative flex-1">
-              <Input
-                type="text"
-                placeholder={isRemote ? 'Search projects...' : 'Search repos...'}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                autoFocus={hasFinePointer}
-                className="pr-9"
-                autoComplete="off"
-                name="repo-quick-switch"
-              />
-              {searchQuery.length > 0 && <SearchClearButton onClear={() => setSearchQuery('')} />}
-            </div>
-            {!isRemote && (
-              <Button
-                type="button"
-                size="lg"
-                onClick={() => {
-                  onClose()
-                  setAddRepoOpen(true)
-                }}
-                className="flex-shrink-0"
-              >
-                <Plus className="h-4 w-4" />
-                <span className="hidden sm:inline">Repo</span>
-                <span className="sr-only">Add repository</span>
-              </Button>
-            )}
-          </div>
-        </BottomSheetHeader>
-      <BottomSheetContent className="flex flex-col px-0 pt-0 gap-0">
-        {isOpen && (
-          <div className="px-2 pt-1">
-            <LinkedServersNav variant="sheet" />
-          </div>
-        )}
-        {isOpen && !searchQuery.trim() && (
-          <CompactActivityList onNavigate={(path) => navigateAndClose(path)} />
-        )}
-        {isRemote ? (
-          <RemoteProjectNavList
-            serverId={selectedServerId}
-            isVisible={isOpen}
-            search={searchQuery}
-            onOpenProject={(path) => navigateAndClose(path, { replace: true })}
-            onSelectSession={(path) => navigateAndClose(path)}
-          />
-        ) : isLoading ? (
-          <div className="flex flex-col gap-2 px-4 pt-3">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="h-14 rounded-lg bg-muted animate-pulse" />
-            ))}
-          </div>
-        ) : filteredRepos.length === 0 ? (
-          <div className="flex flex-col items-center justify-center px-4 pt-3 pb-12 text-muted-foreground">
-            <FolderGit2 className="h-12 w-12 mb-3 opacity-50" />
-            <p className="text-sm">No repos found</p>
-          </div>
-        ) : (
-          <RepoSessionNavList
-            repos={filteredRepos}
-            activeRepoId={activeRepoId}
-            isVisible={isOpen}
-            onOpenRepo={handleClick}
-            onSelectSession={(path) => navigateAndClose(path)}
-            renderActions={(repo) => (
-              <NewSessionButton
-                directory={repo.fullPath}
-                label={getRepoDisplayName(repo)}
-                sessionPath={(sessionId) => getSessionPath(repo.id, sessionId)}
-                onOpenSession={(path) => navigateAndClose(path)}
-              />
-            )}
-          />
-        )}
-        <div aria-hidden="true" className="h-16 shrink-0" />
-      </BottomSheetContent>
-      </BottomSheet>
-      <AddRepoDialog open={addRepoOpen} onOpenChange={setAddRepoOpen} />
-    </>
-  )
-}
diff --git a/frontend/src/components/navigation/RepoSessionNav.tsx b/frontend/src/components/navigation/RepoSessionNav.tsx
index 261db78c8..e3c2edd66 100644
--- a/frontend/src/components/navigation/RepoSessionNav.tsx
+++ b/frontend/src/components/navigation/RepoSessionNav.tsx
@@ -9,7 +9,7 @@ import { useRepoSiblings } from '@/hooks/useRepoSiblings'
 import { useSidebarRepoGroups } from '@/hooks/useSidebarRepoGroups'
 import { buildWorktreeActivity, type ActiveWorktree } from '@/lib/activeWork'
 import { cn, formatShortRelativeTime, getRepoBranchLabel, getRepoDisplayName } from '@/lib/utils'
-import { getRepoPath } from '@/lib/navigation'
+import { getRepoPath, getSessionPath } from '@/lib/navigation'
 import {
   isCurrentSessionItem,
   isRepoReady,
@@ -348,3 +348,23 @@ export function NewSessionButton({
     </button>
   )
 }
+
+interface LocalRepoNewSessionButtonProps {
+  repo: Repo
+  onOpenSession: (path: string) => void
+}
+
+/**
+ * Creates a session in a local repository, deriving the session directory, accessible label, and
+ * session route from the repository so callers only choose what to render and where to navigate.
+ */
+export function LocalRepoNewSessionButton({ repo, onOpenSession }: LocalRepoNewSessionButtonProps) {
+  return (
+    <NewSessionButton
+      directory={repo.fullPath}
+      label={getRepoDisplayName(repo)}
+      sessionPath={(sessionId) => getSessionPath(repo.id, sessionId)}
+      onOpenSession={onOpenSession}
+    />
+  )
+}
diff --git a/frontend/src/components/servers/RemoteProjectList.tsx b/frontend/src/components/servers/RemoteProjectList.tsx
index e333ea81d..c0f8f14b7 100644
--- a/frontend/src/components/servers/RemoteProjectList.tsx
+++ b/frontend/src/components/servers/RemoteProjectList.tsx
@@ -1,14 +1,13 @@
 import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
 import { Folder, FolderGit2, FolderPlus, GitBranch, Search, Server } from 'lucide-react'
-import { listProjects, type OpenCodeProject } from '@/api/opencode'
+import { remoteProjectName, type OpenCodeProject } from '@/api/opencode'
 import { useOpenCodeServers } from '@/hooks/useOpenCodeServers'
+import { useRemoteProjectsByActivity } from '@/hooks/useRemoteProjects'
 import { useSettingsDialog } from '@/hooks/useSettingsDialog'
 import { useProjectActivityState } from '@/hooks/useActiveWork'
-import { serverScopedKey } from '@/lib/serverScope'
 import { getServerProjectPath } from '@/lib/navigation'
-import { formatShortRelativeTime, getDirectoryName } from '@/lib/utils'
+import { formatShortRelativeTime } from '@/lib/utils'
 import { OpenCodeServerProvider } from '@/contexts/OpenCodeServerContext'
 import { ActivityStateIndicator } from '@/components/activity/ActivityStateIndicator'
 import { Button } from '@/components/ui/button'
@@ -20,19 +19,19 @@ import { RepoCardShell } from '@/components/repo/RepoCardShell'
 import { RepoCardSkeleton } from '@/components/repo/RepoCardSkeleton'
 import { RepoSearchInput } from '@/components/repo/RepoSearchInput'
 
-function projectName(project: OpenCodeProject): string {
-  return project.name?.trim() || getDirectoryName(project.canonical)
+interface RemoteProjectCardProps {
+  project: OpenCodeProject
+  serverId: string
+  activityAt: number
 }
 
-function RemoteProjectCard({ project, serverId }: { project: OpenCodeProject; serverId: string }) {
+function RemoteProjectCard({ project, serverId, activityAt }: RemoteProjectCardProps) {
   const navigate = useNavigate()
   const activityState = useProjectActivityState(serverId, project.canonical)
-  const updatedAt = project.time.updated
 
   return (
     <RepoCardShell
-      title={projectName(project)}
-      statusDotClassName="bg-success"
+      title={remoteProjectName(project)}
       activity={<ActivityStateIndicator state={activityState} />}
       actions={<RemoteProjectRowActions serverId={serverId} directory={project.canonical} />}
       meta={
@@ -45,7 +44,7 @@ function RemoteProjectCard({ project, serverId }: { project: OpenCodeProject; se
           <span className="truncate">{project.canonical}</span>
         </span>
       }
-      activityLabel={updatedAt > 0 ? formatShortRelativeTime(new Date(updatedAt)) : undefined}
+      activityLabel={activityAt > 0 ? formatShortRelativeTime(new Date(activityAt)) : undefined}
       isInteractive
       onClick={() => navigate(getServerProjectPath(serverId, project.canonical))}
     />
@@ -95,21 +94,15 @@ function RemoteProjectListContent({ serverId }: { serverId: string }) {
   const server = servers.find((candidate) => candidate.id === serverId)
   const isDisabled = server !== undefined && !server.enabled
 
-  const projectsQuery = useQuery({
-    queryKey: serverScopedKey(['opencode', 'projects'], serverId),
-    queryFn: () => listProjects(serverId),
-    enabled: server?.enabled === true,
-    retry: false,
-  })
-
-  const projects = useMemo(() => projectsQuery.data ?? [], [projectsQuery.data])
+  const { projects, activityById, isLoading, isError, hasData, error, refetch } = useRemoteProjectsByActivity(serverId)
+  const showsProjectError = isError && !hasData
 
   const filteredProjects = useMemo(() => {
     const query = searchQuery.trim().toLowerCase()
     if (!query) return projects
 
     return projects.filter((project) =>
-      projectName(project).toLowerCase().includes(query) ||
+      remoteProjectName(project).toLowerCase().includes(query) ||
       project.canonical.toLowerCase().includes(query),
     )
   }, [projects, searchQuery])
@@ -138,25 +131,25 @@ function RemoteProjectListContent({ serverId }: { serverId: string }) {
         />
       ) : null}
 
-      {server && !isDisabled && projectsQuery.isError ? (
+      {server && !isDisabled && showsProjectError ? (
         <Card className="flex flex-col items-center gap-3 p-6 text-center">
           <Server className="h-8 w-8 text-muted-foreground" />
           <div>
             <p className="font-medium">Could not load projects</p>
             <p className="text-sm text-muted-foreground">
-              {projectsQuery.error instanceof Error
-                ? projectsQuery.error.message
+              {error instanceof Error
+                ? error.message
                 : 'The server did not respond.'}
             </p>
           </div>
-          <Button variant="outline" size="sm" onClick={() => void projectsQuery.refetch()}>
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
             Retry
           </Button>
         </Card>
       ) : null}
 
-      {server && !isDisabled && !projectsQuery.isError ? (
-        projectsQuery.isLoading ? (
+      {server && !isDisabled && !showsProjectError ? (
+        isLoading ? (
           <RemoteProjectListLoading />
         ) : projects.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center p-12 text-center">
@@ -196,6 +189,7 @@ function RemoteProjectListContent({ serverId }: { serverId: string }) {
                         key={project.id}
                         project={project}
                         serverId={serverId}
+                        activityAt={activityById.get(project.id) ?? 0}
                       />
                     ))}
                   </div>
diff --git a/frontend/src/components/servers/__tests__/RemoteProjectList.test.tsx b/frontend/src/components/servers/__tests__/RemoteProjectList.test.tsx
index aa9c6532c..9492e0aa0 100644
--- a/frontend/src/components/servers/__tests__/RemoteProjectList.test.tsx
+++ b/frontend/src/components/servers/__tests__/RemoteProjectList.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
@@ -7,6 +7,7 @@ import { RemoteProjectList } from '../RemoteProjectList'
 
 const mocks = vi.hoisted(() => ({
   listProjects: vi.fn(),
+  listSessionPage: vi.fn(),
   useCreateSession: vi.fn(),
   useOpenCodeServers: vi.fn(),
   useSettingsDialog: vi.fn(),
@@ -15,13 +16,15 @@ const mocks = vi.hoisted(() => ({
   isMobile: true,
 }))
 
-vi.mock('@/api/opencode', () => ({
-  listProjects: mocks.listProjects,
-}))
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return { ...actual, listProjects: mocks.listProjects, listSessionPage: mocks.listSessionPage }
+})
 
-vi.mock('@/hooks/useOpenCode', () => ({
-  useCreateSession: mocks.useCreateSession,
-}))
+vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/hooks/useOpenCode')>()
+  return { ...actual, useCreateSession: mocks.useCreateSession }
+})
 
 vi.mock('@/hooks/useOpenCodeServers', () => ({
   useOpenCodeServers: mocks.useOpenCodeServers,
@@ -109,13 +112,24 @@ const otherProject = {
   sandboxes: [],
 }
 
+function createSession(directory: string, updated: number) {
+  return {
+    id: `ses_${directory}`,
+    projectID: 'prj_1',
+    cost: 0,
+    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    time: { created: updated - 1000, updated },
+    location: { directory },
+  }
+}
+
 function createQueryClient() {
   return new QueryClient({ defaultOptions: { queries: { retry: false } } })
 }
 
-function renderProjectList(serverId = 'srv_kitchen') {
+function renderProjectList(serverId = 'srv_kitchen', queryClient = createQueryClient()) {
   return render(
-    <QueryClientProvider client={createQueryClient()}>
+    <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={['/']}>
         <Routes>
           <Route path="/" element={<RemoteProjectList serverId={serverId} />} />
@@ -132,6 +146,7 @@ describe('RemoteProjectList', () => {
     vi.clearAllMocks()
     mocks.isMobile = true
     mocks.listProjects.mockResolvedValue([project])
+    mocks.listSessionPage.mockResolvedValue({ items: [] })
     mocks.useCreateSession.mockReturnValue({ mutateAsync: mocks.createSession, isPending: false })
     mocks.useOpenCodeServers.mockReturnValue({ servers: [server], isLoading: false })
     mocks.useSettingsDialog.mockReturnValue({ openTab: mocks.openTab })
@@ -147,6 +162,72 @@ describe('RemoteProjectList', () => {
     expect(mocks.listProjects).toHaveBeenCalledWith('srv_kitchen')
   })
 
+  it('labels a row with its newest session time instead of the project activity time', async () => {
+    const now = Date.now()
+    mocks.listProjects.mockResolvedValue([
+      {
+        ...project,
+        time: { created: now - 10_800_000, updated: now - 10_800_000, active: now },
+      },
+    ])
+    mocks.listSessionPage.mockResolvedValue({
+      items: [createSession('/home/me/app', now - 300_000)],
+    })
+
+    renderProjectList()
+
+    await screen.findByText('App')
+    expect(await screen.findByText('5m ago')).toBeInTheDocument()
+  })
+
+  it('labels a row with the update time when the project has no session in the fetched page', async () => {
+    const now = Date.now()
+    mocks.listProjects.mockResolvedValue([
+      {
+        ...project,
+        time: { created: now - 10_800_000, updated: now - 300_000, active: now },
+      },
+    ])
+
+    renderProjectList()
+
+    await screen.findByText('App')
+    expect(await screen.findByText('5m ago')).toBeInTheDocument()
+  })
+
+  it('orders projects by their newest session, not by the project activity time', async () => {
+    const now = Date.now()
+    mocks.listProjects.mockResolvedValue([
+      {
+        ...project,
+        time: { created: now - 10_800_000, updated: now - 10_800_000, active: now },
+      },
+      {
+        ...otherProject,
+        time: { created: now - 10_800_000, updated: now - 10_800_000, active: now - 3_600_000 },
+      },
+    ])
+    mocks.listSessionPage.mockResolvedValue({
+      items: [createSession('/srv/other', now - 120_000)],
+    })
+
+    renderProjectList()
+
+    await screen.findByText('App')
+    await waitFor(() => {
+      expect(screen.getByText('Other')).toBeInTheDocument()
+    })
+    const names = screen.getAllByRole('heading', { level: 3 }).map((heading) => heading.textContent)
+    expect(names).toEqual(['Other', 'App'])
+  })
+
+  it('shows no status dot on remote project cards', async () => {
+    const { container } = renderProjectList()
+
+    await screen.findByText('App')
+    expect(container.querySelector('.bg-success')).toBeNull()
+  })
+
   it('opens the remote project page when a project card is clicked', async () => {
     const user = userEvent.setup()
     renderProjectList()
@@ -342,6 +423,32 @@ describe('RemoteProjectList', () => {
     })
   })
 
+  it('shows the load error when no project data is cached', async () => {
+    mocks.listProjects.mockRejectedValue(new Error('offline'))
+
+    renderProjectList()
+
+    expect(await screen.findByText('Could not load projects')).toBeInTheDocument()
+  })
+
+  it('keeps the cached project list when a refetch fails', async () => {
+    const queryClient = createQueryClient()
+    mocks.listProjects.mockResolvedValueOnce([project]).mockRejectedValueOnce(new Error('offline'))
+
+    renderProjectList('srv_kitchen', queryClient)
+
+    await screen.findByText('App')
+    await act(async () => {
+      await queryClient.refetchQueries()
+    })
+
+    await waitFor(() => {
+      expect(mocks.listProjects).toHaveBeenCalledTimes(2)
+    })
+    expect(screen.getByText('App')).toBeInTheDocument()
+    expect(screen.queryByText('Could not load projects')).not.toBeInTheDocument()
+  })
+
   it('scopes the list to the given server rather than the route', async () => {
     renderProjectList('srv_kitchen')
 
diff --git a/frontend/src/components/session/ContextUsageIndicator.test.tsx b/frontend/src/components/session/ContextUsageIndicator.test.tsx
deleted file mode 100644
index 3e835c9e2..000000000
--- a/frontend/src/components/session/ContextUsageIndicator.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { ContextUsageIndicator } from './ContextUsageIndicator'
-
-const mocks = vi.hoisted(() => ({
-  useContextUsage: vi.fn(),
-  useMobile: vi.fn(),
-}))
-
-vi.mock('@/hooks/useContextUsage', () => ({
-  useContextUsage: mocks.useContextUsage,
-}))
-
-vi.mock('@/hooks/useMobile', () => ({
-  useMobile: mocks.useMobile,
-}))
-
-function renderIndicator() {
-  return render(<ContextUsageIndicator sessionID="ses_1" isConnected={true} />)
-}
-
-describe('ContextUsageIndicator', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders tokens and percentage on desktop', () => {
-    mocks.useMobile.mockReturnValue(false)
-    mocks.useContextUsage.mockReturnValue({ usage: { totalTokens: 1234, usagePercentage: 42 }, isLoading: false })
-    renderIndicator()
-
-    expect(screen.getByText('1,234 (42%)')).toBeInTheDocument()
-    expect(screen.queryByText('42%')).not.toBeInTheDocument()
-  })
-
-  it('renders only the percentage on mobile', () => {
-    mocks.useMobile.mockReturnValue(true)
-    mocks.useContextUsage.mockReturnValue({ usage: { totalTokens: 1234, usagePercentage: 42 }, isLoading: false })
-    renderIndicator()
-
-    expect(screen.getByText('42%')).toBeInTheDocument()
-    expect(screen.queryByText('1,234 (42%)')).not.toBeInTheDocument()
-  })
-
-  it('renders only the token count on mobile without a percentage', () => {
-    mocks.useMobile.mockReturnValue(true)
-    mocks.useContextUsage.mockReturnValue({ usage: { totalTokens: 1234, usagePercentage: null }, isLoading: false })
-    renderIndicator()
-
-    expect(screen.getByText('1,234')).toBeInTheDocument()
-  })
-})
diff --git a/frontend/src/components/session/ContextUsageIndicator.tsx b/frontend/src/components/session/ContextUsageIndicator.tsx
deleted file mode 100644
index 64d4b354a..000000000
--- a/frontend/src/components/session/ContextUsageIndicator.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useContextUsage } from '@/hooks/useContextUsage'
-import { useMobile } from '@/hooks/useMobile'
-
-interface ContextUsageIndicatorProps {
-  directory?: string
-  sessionID: string | undefined
-  isConnected: boolean
-  isReconnecting?: boolean
-  revertMessageID?: string
-}
-
-const getUsageTextColor = (percentage: number) => {
-  if (percentage < 50) return 'text-success'
-  if (percentage < 80) return 'text-warning'
-  return 'text-destructive'
-}
-
-export function ContextUsageIndicator({
-  directory,
-  sessionID,
-  isConnected,
-  isReconnecting,
-  revertMessageID,
-}: ContextUsageIndicatorProps) {
-  const { usage, isLoading } = useContextUsage(sessionID, directory, revertMessageID)
-  const isMobile = useMobile()
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center gap-2">
-        <span className="text-xs text-muted-foreground">Loading...</span>
-      </div>
-    )
-  }
-
-  if (isReconnecting) {
-    return <span className="text-xs text-warning font-medium">Reconnecting...</span>
-  }
-
-  if (!isConnected) {
-    return <span className="text-xs text-muted-foreground font-medium">Disconnected</span>
-  }
-
-  if (!usage) {
-    return null
-  }
-
-  const compactText = usage.usagePercentage === null
-    ? usage.totalTokens.toLocaleString()
-    : `${usage.usagePercentage}%`
-
-  const fullText = usage.usagePercentage === null
-    ? usage.totalTokens.toLocaleString()
-    : `${usage.totalTokens.toLocaleString()} (${usage.usagePercentage}%)`
-
-  return (
-    <div className="flex items-center gap-2">
-      <span className={`text-xs font-medium whitespace-nowrap ${getUsageTextColor(usage.usagePercentage ?? 0)}`}>
-        {isMobile ? compactText : fullText}
-      </span>
-    </div>
-  )
-}
diff --git a/frontend/src/components/session/ContextUsageMeter.tsx b/frontend/src/components/session/ContextUsageMeter.tsx
new file mode 100644
index 000000000..6b71370a9
--- /dev/null
+++ b/frontend/src/components/session/ContextUsageMeter.tsx
@@ -0,0 +1,25 @@
+import { Progress } from '@/components/ui/progress'
+import { cn } from '@/lib/utils'
+import { CONTEXT_USAGE_BG_CLASS, contextUsageTone } from '@/lib/contextUsage'
+
+interface ContextUsageMeterProps {
+  percentage: number | null
+  className?: string
+}
+
+/**
+ * Thin context-window fill bar. Its accessible label lives on the model pill, so the bar itself is hidden
+ * from assistive technology.
+ */
+export function ContextUsageMeter({ percentage, className }: ContextUsageMeterProps) {
+  return (
+    <Progress
+      data-testid="context-usage-meter"
+      aria-hidden="true"
+      value={percentage ?? 0}
+      className={cn('h-0.5 rounded-none bg-border/50', className)}
+      indicatorClassName={cn('transition-none', CONTEXT_USAGE_BG_CLASS[contextUsageTone(percentage)])}
+      indicatorTestId="context-usage-meter-fill"
+    />
+  )
+}
diff --git a/frontend/src/components/session/EditSessionTitleDialog.tsx b/frontend/src/components/session/EditSessionTitleDialog.tsx
deleted file mode 100644
index 1aa845834..000000000
--- a/frontend/src/components/session/EditSessionTitleDialog.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { X, Check } from "lucide-react";
-import { useState, useRef, useEffect } from "react";
-import { useMobile } from "@/hooks/useMobile";
-
-interface EditSessionTitleDialogProps {
-  isOpen: boolean;
-  currentTitle: string;
-  onClose: () => void;
-  onSave: (newTitle: string) => void;
-}
-
-export function EditSessionTitleDialog({ isOpen, currentTitle, onClose, onSave }: EditSessionTitleDialogProps) {
-  const [editTitle, setEditTitle] = useState(currentTitle);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isMobile = useMobile();
-
-  useEffect(() => {
-    if (isOpen) {
-      setEditTitle(currentTitle);
-    }
-  }, [isOpen, currentTitle]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setEditTitle(currentTitle);
-      onClose();
-    } else if (e.key === 'Enter') {
-      if (editTitle.trim() && editTitle !== currentTitle) {
-        onSave(editTitle.trim());
-      }
-      onClose();
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editTitle.trim() && editTitle !== currentTitle) {
-      onSave(editTitle.trim());
-    }
-    onClose();
-  };
-
-  const handleCancel = () => {
-    setEditTitle(currentTitle);
-    onClose();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent 
-        hideCloseButton
-        className={isMobile 
-          ? "w-screen max-w-none left-0 top-0 translate-x-0 translate-y-0 rounded-none border-0 border-b bg-background p-4 gap-0 pt-safe"
-          : "p-6 gap-0"
-        }
-      >
-        <form onSubmit={handleSubmit} className="min-w-0">
-          <p className="text-sm text-muted-foreground mb-2">Change session title</p>
-          <div className="relative">
-            <input
-              ref={inputRef}
-              type="text"
-              value={editTitle}
-              onChange={(e) => setEditTitle(e.target.value)}
-              onKeyDown={handleKeyDown}
-              className="text-base font-semibold bg-background border border-border rounded px-3 py-2.5 pr-10 outline-none w-full focus:border-primary focus:ring-2 focus:ring-primary/20"
-              autoFocus
-            />
-            {editTitle && (
-              <button
-                type="button"
-                onClick={() => {
-                  setEditTitle("");
-                  inputRef.current?.focus();
-                }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full hover:bg-destructive/10 text-destructive transition-colors"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            )}
-          </div>
-          <div className="flex items-center gap-2 mt-3">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={handleCancel}
-              className="flex-1 h-10"
-            >
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              className="flex-1 h-10"
-            >
-              <Check className="w-4 h-4 mr-2" />
-              Save
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
\ No newline at end of file
diff --git a/frontend/src/components/session/ProjectPickerContent.tsx b/frontend/src/components/session/ProjectPickerContent.tsx
index 49b2d24df..632c78a30 100644
--- a/frontend/src/components/session/ProjectPickerContent.tsx
+++ b/frontend/src/components/session/ProjectPickerContent.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useId, useMemo, useState } from 'react'
 import type { Repo } from '@/api/types'
 import { useNavigableRepos } from '@/hooks/useSidebarRepoGroups'
+import { LocalRepoNewSessionButton } from '@/components/navigation/RepoSessionNav'
+import { isRepoReady } from '@/components/navigation/sidebar-session-tree'
 import { cn, getRepoBranchLabel, getRepoDisplayName } from '@/lib/utils'
 import {
   PickerSearchBar,
@@ -13,8 +15,10 @@ interface ProjectPickerContentProps {
   open: boolean
   currentRepo: Repo | undefined
   onSelectRepo: (repo: Repo) => void
+  onNavigate: (path: string) => void
   switchHint: string
   searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchTrailing?: React.ReactNode
 }
 
 interface ProjectPickerRow {
@@ -26,8 +30,10 @@ export function ProjectPickerContent({
   open,
   currentRepo,
   onSelectRepo,
+  onNavigate,
   switchHint,
   searchInputRef,
+  searchTrailing,
 }: ProjectPickerContentProps) {
   const { repos, isLoading } = useNavigableRepos()
   const listId = useId()
@@ -89,6 +95,7 @@ export function ProjectPickerContent({
         onKeyDown={handleSearchKeyDown}
         placeholder="Search projects..."
         name="project-picker-search"
+        trailing={searchTrailing}
       />
 
       <div
@@ -149,6 +156,11 @@ export function ProjectPickerContent({
                     </span>
                   )}
                 </div>
+                {isRepoReady(repo) ? (
+                  <LocalRepoNewSessionButton repo={repo} onOpenSession={onNavigate} />
+                ) : (
+                  <span className="shrink-0 pr-2 text-xs text-muted-foreground">Not ready</span>
+                )}
               </div>
             )
           })
diff --git a/frontend/src/components/session/ReconnectingBanner.test.tsx b/frontend/src/components/session/ReconnectingBanner.test.tsx
new file mode 100644
index 000000000..ee0baf2a3
--- /dev/null
+++ b/frontend/src/components/session/ReconnectingBanner.test.tsx
@@ -0,0 +1,102 @@
+import { render, screen, act } from '@testing-library/react'
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { ReconnectingBanner } from './ReconnectingBanner'
+
+const GRACE_PERIOD_MS = 5000
+
+describe('ReconnectingBanner', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('stays hidden during the initial grace period', () => {
+    vi.useFakeTimers()
+    render(<ReconnectingBanner connected={false} />)
+
+    act(() => {
+      vi.advanceTimersByTime(GRACE_PERIOD_MS - 1)
+    })
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+
+  it('reports a stream that never connects once the grace period elapses', () => {
+    vi.useFakeTimers()
+    render(<ReconnectingBanner connected={false} />)
+
+    act(() => {
+      vi.advanceTimersByTime(GRACE_PERIOD_MS)
+    })
+
+    const banner = screen.getByRole('status')
+    expect(banner).toHaveTextContent('Not connected — live updates unavailable')
+    expect(banner).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('hides the not-connected banner as soon as the stream connects', () => {
+    vi.useFakeTimers()
+    const { rerender } = render(<ReconnectingBanner connected={false} />)
+
+    act(() => {
+      vi.advanceTimersByTime(GRACE_PERIOD_MS)
+    })
+    expect(screen.getByRole('status')).toBeInTheDocument()
+
+    rerender(<ReconnectingBanner connected />)
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+
+  it('stays hidden while the stream is connected', () => {
+    vi.useFakeTimers()
+    render(<ReconnectingBanner connected />)
+
+    act(() => {
+      vi.advanceTimersByTime(GRACE_PERIOD_MS * 2)
+    })
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+
+  it('reports a dropped stream once it connected', () => {
+    vi.useFakeTimers()
+    const { rerender } = render(<ReconnectingBanner connected />)
+
+    rerender(<ReconnectingBanner connected={false} />)
+
+    const banner = screen.getByRole('status')
+    expect(banner).toHaveTextContent('Reconnecting… live updates paused')
+    expect(banner).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('keeps the reconnect message when the drop outlasts the grace period', () => {
+    vi.useFakeTimers()
+    const { rerender } = render(<ReconnectingBanner connected />)
+
+    rerender(<ReconnectingBanner connected={false} />)
+    act(() => {
+      vi.advanceTimersByTime(GRACE_PERIOD_MS * 2)
+    })
+
+    expect(screen.getByRole('status')).toHaveTextContent('Reconnecting… live updates paused')
+  })
+
+  it('hides again when the stream reconnects', () => {
+    vi.useFakeTimers()
+    const { rerender } = render(<ReconnectingBanner connected />)
+
+    rerender(<ReconnectingBanner connected={false} />)
+    rerender(<ReconnectingBanner connected />)
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+  })
+
+  it('clears the grace timer on unmount', () => {
+    vi.useFakeTimers()
+    const { unmount } = render(<ReconnectingBanner connected={false} />)
+
+    unmount()
+
+    expect(vi.getTimerCount()).toBe(0)
+  })
+})
diff --git a/frontend/src/components/session/ReconnectingBanner.tsx b/frontend/src/components/session/ReconnectingBanner.tsx
new file mode 100644
index 000000000..18c1a8e93
--- /dev/null
+++ b/frontend/src/components/session/ReconnectingBanner.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+const NOT_CONNECTED_GRACE_PERIOD_MS = 5000
+
+export interface ReconnectingBannerProps {
+  connected: boolean
+}
+
+function StatusBanner({ message }: { message: string }) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="w-full border-b border-warning/40 bg-warning/10 px-3 py-1 text-xs text-warning"
+    >
+      {message}
+    </div>
+  )
+}
+
+export function ReconnectingBanner({ connected }: ReconnectingBannerProps) {
+  const [hasConnected, setHasConnected] = useState(false)
+  const [graceElapsed, setGraceElapsed] = useState(false)
+
+  useEffect(() => {
+    if (connected) setHasConnected(true)
+  }, [connected])
+
+  useEffect(() => {
+    if (connected) {
+      setGraceElapsed(false)
+      return
+    }
+    const timer = setTimeout(() => setGraceElapsed(true), NOT_CONNECTED_GRACE_PERIOD_MS)
+    return () => clearTimeout(timer)
+  }, [connected])
+
+  if (connected) return null
+  if (hasConnected) return <StatusBanner message="Reconnecting… live updates paused" />
+  if (graceElapsed) return <StatusBanner message="Not connected — live updates unavailable" />
+  return null
+}
diff --git a/frontend/src/components/session/SessionDetailsSheet.test.tsx b/frontend/src/components/session/SessionDetailsSheet.test.tsx
new file mode 100644
index 000000000..dabb6a342
--- /dev/null
+++ b/frontend/src/components/session/SessionDetailsSheet.test.tsx
@@ -0,0 +1,253 @@
+import { useState } from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { SessionDetailsSheet, type SessionDetailsSheetProps } from './SessionDetailsSheet'
+
+const mocks = vi.hoisted(() => ({
+  useMobile: vi.fn(),
+}))
+
+vi.mock('@/hooks/useMobile', () => ({
+  useMobile: mocks.useMobile,
+  useSwipeBack: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })),
+  useSwipeDismiss: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })),
+}))
+
+const baseProps: SessionDetailsSheetProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  title: 'Fix the header',
+  remote: false,
+  project: 'oc-manager',
+  onRename: vi.fn(() => Promise.resolve()),
+}
+
+function createDeferred() {
+  let resolve!: () => void
+  let reject!: (error: Error) => void
+  const promise = new Promise<void>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function failingRename(error = new Error('nope')) {
+  return vi.fn(() => Promise.reject(error))
+}
+
+function renderSheet(overrides: Partial<SessionDetailsSheetProps> = {}) {
+  return render(<SessionDetailsSheet {...baseProps} {...overrides} />)
+}
+
+describe('SessionDetailsSheet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.useMobile.mockReturnValue(false)
+  })
+
+  it('lists the local session details', () => {
+    renderSheet({ branch: 'feat/header', directory: '/abs/repos/oc-manager' })
+
+    expect(screen.getByText('Session details')).toBeInTheDocument()
+    expect(screen.getByText('Fix the header')).toBeInTheDocument()
+    expect(screen.getByText('Local')).toBeInTheDocument()
+    expect(screen.getByText('oc-manager')).toBeInTheDocument()
+    expect(screen.getByText('feat/header')).toBeInTheDocument()
+    expect(screen.getByText('/abs/repos/oc-manager')).toBeInTheDocument()
+  })
+
+  it('shows the linked server name and marks the session as remote', () => {
+    renderSheet({ remote: true, serverName: 'Kitchen' })
+
+    expect(screen.getByText('Kitchen')).toBeInTheDocument()
+  })
+
+  it('falls back to a remote server label without a server name', () => {
+    renderSheet({ remote: true })
+
+    expect(screen.getByText('Remote server')).toBeInTheDocument()
+  })
+
+  it('omits branch and directory rows when they are unknown', () => {
+    renderSheet({ branch: null })
+
+    expect(screen.queryByText('Branch')).not.toBeInTheDocument()
+    expect(screen.queryByText('Directory')).not.toBeInTheDocument()
+  })
+
+  it('falls back to an untitled session label', () => {
+    renderSheet({ title: '   ' })
+
+    expect(screen.getByText('Untitled Session')).toBeInTheDocument()
+  })
+
+  it('prefills the rename field with the raw title', () => {
+    renderSheet({ title: '  Raw title  ' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+
+    expect(screen.getByLabelText('Session title')).toHaveValue('  Raw title  ')
+  })
+
+  it('leaves the rename field empty when the session has no title', () => {
+    renderSheet({ title: undefined })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+
+    expect(screen.getByLabelText('Session title')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+  })
+
+  it('disables Save while the trimmed draft is empty', () => {
+    renderSheet()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    fireEvent.change(screen.getByLabelText('Session title'), { target: { value: '   ' } })
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+  })
+
+  it('saves the trimmed title and leaves edit mode on success', async () => {
+    const user = userEvent.setup()
+    const onRename = vi.fn(() => Promise.resolve())
+    renderSheet({ onRename })
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.clear(screen.getByLabelText('Session title'))
+    await user.type(screen.getByLabelText('Session title'), '  New name  ')
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onRename).toHaveBeenCalledWith('New name')
+    expect(screen.queryByLabelText('Session title')).not.toBeInTheDocument()
+    expect(screen.getByText('Fix the header')).toBeInTheDocument()
+  })
+
+  it('saves on Enter', async () => {
+    const onRename = vi.fn(() => Promise.resolve())
+    renderSheet({ onRename })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    fireEvent.change(screen.getByLabelText('Session title'), { target: { value: 'Entered' } })
+    await act(async () => {
+      fireEvent.keyDown(screen.getByLabelText('Session title'), { key: 'Enter' })
+    })
+
+    expect(onRename).toHaveBeenCalledWith('Entered')
+  })
+
+  it('ignores Enter while an IME composition is active', () => {
+    const onRename = vi.fn(() => Promise.resolve())
+    renderSheet({ onRename })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    const input = screen.getByLabelText('Session title')
+    fireEvent.change(input, { target: { value: 'にほんご' } })
+    fireEvent.keyDown(input, { key: 'Enter', isComposing: true })
+
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('shows the rename failure inline', async () => {
+    const user = userEvent.setup()
+    renderSheet({ onRename: failingRename() })
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(await screen.findByText('Rename failed')).toBeInTheDocument()
+    expect(screen.getByLabelText('Session title')).toBeInTheDocument()
+  })
+
+  it('cancels editing and clears the rename error', async () => {
+    const user = userEvent.setup()
+    renderSheet({ onRename: failingRename() })
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    expect(await screen.findByText('Rename failed')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    expect(screen.queryByText('Rename failed')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Session title')).not.toBeInTheDocument()
+  })
+
+  it('disables the title field while a rename is pending', async () => {
+    const user = userEvent.setup()
+    const deferred = createDeferred()
+    renderSheet({ onRename: () => deferred.promise })
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(screen.getByLabelText('Session title')).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+
+    await act(async () => {
+      deferred.resolve()
+    })
+  })
+
+  it('does not dismiss while a rename is pending', async () => {
+    const user = userEvent.setup()
+    const deferred = createDeferred()
+    const onOpenChange = vi.fn()
+    renderSheet({ onOpenChange, onRename: () => deferred.promise })
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await user.keyboard('{Escape}')
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+
+    expect(onOpenChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+    await act(async () => {
+      deferred.resolve()
+    })
+  })
+
+  it('resets to view mode and clears the error when reopened', async () => {
+    const user = userEvent.setup()
+
+    function Host() {
+      const [open, setOpen] = useState(true)
+      return (
+        <>
+          <button type="button" onClick={() => setOpen((current) => !current)}>
+            toggle
+          </button>
+          <SessionDetailsSheet
+            {...baseProps}
+            open={open}
+            onOpenChange={setOpen}
+            onRename={failingRename()}
+          />
+        </>
+      )
+    }
+
+    render(<Host />)
+
+    await user.click(screen.getByRole('button', { name: 'Rename' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    expect(await screen.findByText('Rename failed')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('toggle'))
+    fireEvent.click(screen.getByText('toggle'))
+
+    expect(screen.queryByLabelText('Session title')).not.toBeInTheDocument()
+    expect(screen.queryByText('Rename failed')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Rename' })).toBeInTheDocument()
+  })
+
+  it('renders as a bottom sheet on mobile', () => {
+    mocks.useMobile.mockReturnValue(true)
+    renderSheet({ branch: 'feat/header' })
+
+    expect(screen.getByRole('dialog')).toHaveAccessibleName('Session details')
+    expect(screen.getByText('feat/header')).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/components/session/SessionDetailsSheet.tsx b/frontend/src/components/session/SessionDetailsSheet.tsx
new file mode 100644
index 000000000..85d699d09
--- /dev/null
+++ b/frontend/src/components/session/SessionDetailsSheet.tsx
@@ -0,0 +1,205 @@
+import { useState, type ReactNode } from 'react'
+import { Server } from 'lucide-react'
+import { BottomSheet, BottomSheetContent, BottomSheetHeader } from '@/components/ui/bottom-sheet'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { useMobile } from '@/hooks/useMobile'
+import { cn } from '@/lib/utils'
+
+export interface SessionDetailsSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title?: string
+  serverName?: string
+  remote: boolean
+  project: string
+  branch?: string | null
+  directory?: string
+  onRename: (title: string) => Promise<void>
+}
+
+interface InfoRowProps {
+  label: string
+  value: string
+  mono?: boolean
+  leading?: ReactNode
+}
+
+function InfoRow({ label, value, mono, leading }: InfoRowProps) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <div className="flex min-w-0 items-start gap-1.5">
+        {leading}
+        <span className={cn('min-w-0 select-text break-words', mono && 'font-mono text-xs')}>
+          {value}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function SessionDetailsSheet({
+  open,
+  onOpenChange,
+  title,
+  serverName,
+  remote,
+  project,
+  branch,
+  directory,
+  onRename,
+}: SessionDetailsSheetProps) {
+  const isMobile = useMobile()
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [renameFailed, setRenameFailed] = useState(false)
+  const [lastOpen, setLastOpen] = useState(open)
+
+  if (open !== lastOpen) {
+    setLastOpen(open)
+    if (open) {
+      setEditing(false)
+      setRenameFailed(false)
+    }
+  }
+
+  const displayTitle = title?.trim() ? title : 'Untitled Session'
+  const trimmedDraft = draft.trim()
+  const canSave = trimmedDraft.length > 0 && !saving
+
+  const startEditing = () => {
+    setDraft(title ?? '')
+    setEditing(true)
+  }
+
+  const cancelEditing = () => {
+    setEditing(false)
+    setRenameFailed(false)
+  }
+
+  const save = async () => {
+    if (!canSave) return
+    setSaving(true)
+    setRenameFailed(false)
+    try {
+      await onRename(trimmedDraft)
+      setEditing(false)
+    } catch {
+      setRenameFailed(true)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (saving) return
+    onOpenChange(false)
+  }
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      handleClose()
+      return
+    }
+    onOpenChange(true)
+  }
+
+  const body = (
+    <div className="flex min-w-0 flex-col gap-4">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="text-xs text-muted-foreground">Title</span>
+        {editing ? (
+          <>
+            <input
+              type="text"
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.nativeEvent.isComposing) return
+                if (event.key !== 'Enter') return
+                event.preventDefault()
+                save()
+              }}
+              disabled={saving}
+              aria-label="Session title"
+              placeholder="Session title"
+              autoFocus
+              className="w-full min-w-0 rounded border border-border bg-background px-3 py-2 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-60"
+            />
+            {renameFailed && (
+              <span className="text-xs text-destructive">Rename failed</span>
+            )}
+            <div className="flex items-center gap-2 pt-1">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={cancelEditing}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                onClick={save}
+                disabled={!canSave}
+                className="flex-1"
+              >
+                Save
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <span className="select-text break-words text-sm">{displayTitle}</span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={startEditing}
+              className="mt-1 self-start"
+            >
+              Rename
+            </Button>
+          </>
+        )}
+      </div>
+      <InfoRow
+        label="Server"
+        value={remote ? serverName || 'Remote server' : 'Local'}
+        leading={remote ? <Server className="mt-0.5 h-3.5 w-3.5 shrink-0 text-highlight" /> : undefined}
+      />
+      <InfoRow label="Project" value={project} />
+      {branch ? <InfoRow label="Branch" value={branch} mono /> : null}
+      {directory ? <InfoRow label="Directory" value={directory} mono /> : null}
+    </div>
+  )
+
+  if (isMobile) {
+    return (
+      <BottomSheet
+        isOpen={open}
+        onClose={handleClose}
+        ariaLabel="Session details"
+        dismissible={!saving}
+      >
+        <BottomSheetHeader title="Session details" />
+        <BottomSheetContent>{body}</BottomSheetContent>
+      </BottomSheet>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Session details</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/components/session/SessionPickerDialog.test.tsx b/frontend/src/components/session/SessionPickerDialog.test.tsx
index 0e08e4037..eedba48f8 100644
--- a/frontend/src/components/session/SessionPickerDialog.test.tsx
+++ b/frontend/src/components/session/SessionPickerDialog.test.tsx
@@ -7,6 +7,7 @@ import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
 import type { Repo, Session } from '@/api/types'
 import type { ActiveWorkGroups, ActiveWorkItem, ActiveWorkState } from '@/lib/activeWork'
 import { stubMatchMedia } from '@/test/test-utils'
+import { makeRepo, makeSession } from '@/test/fixtures/session-picker'
 import { DEFAULT_ACTIVITY_WINDOW_MINUTES } from '@/api/types/settings'
 import { KeyboardShortcutsProvider } from '@/contexts/KeyboardShortcutsContext'
 import { OpenCodeServerProvider } from '@/contexts/OpenCodeServerContext'
@@ -21,9 +22,11 @@ const mocks = vi.hoisted(() => ({
     | { directory: string; project: { id: string; directory: string; canonical: string } }
     | undefined,
   sessionsHook: vi.fn(),
+  lastSessionServerId: null as string | null,
   fetchNextPage: vi.fn(),
   deleteSessionMock: vi.fn(),
   deletedSessionServerId: null as string | null,
+  createSessionDirectories: [] as string[],
   togglePinMock: vi.fn(),
   getOpenCodeLocation: vi.fn(),
   sessionPins: [] as Array<{ sessionId: string; directory: string; pinnedAt: number }>,
@@ -44,6 +47,12 @@ vi.mock('@/hooks/useSettings', () => ({
   useSettings: () => ({ preferences: mocks.preferences }),
 }))
 
+vi.mock('@/api/repos', () => ({
+  listRepos: vi.fn().mockResolvedValue([]),
+  createRepo: vi.fn(),
+  discoverRepos: vi.fn(),
+}))
+
 vi.mock('@/api/opencode', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/api/opencode')>()
   return { ...actual, getOpenCodeLocation: mocks.getOpenCodeLocation }
@@ -59,6 +68,7 @@ vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
       options?: { search?: string; allDirectories?: boolean; project?: { id: string; subpath: string } },
     ) => {
       mocks.sessionsHook()
+      mocks.lastSessionServerId = useOpenCodeServerId()
       mocks.lastDirectories = directories
       mocks.lastAllDirectories = options?.allDirectories ?? false
       mocks.lastProject = options?.project
@@ -87,6 +97,13 @@ vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
         isPending: false,
       }
     },
+    useCreateSession: (directory: string, onSuccess?: (session: { id: string }) => void) => ({
+      mutate: () => {
+        mocks.createSessionDirectories.push(directory)
+        onSuccess?.({ id: 'ses_new' })
+      },
+      isPending: false,
+    }),
   }
 })
 
@@ -95,6 +112,12 @@ vi.mock('@/hooks/useSessionPins', () => ({
   useToggleSessionPin: () => ({ mutate: mocks.togglePinMock }),
 }))
 
+vi.mock('@/components/navigation/RemoteProjectNav', () => ({
+  RemoteProjectNavList: ({ serverId }: { serverId: string }) => (
+    <div data-testid="remote-project-nav" data-server={serverId} />
+  ),
+}))
+
 vi.mock('@/hooks/useSidebarRepoGroups', () => ({
   useNavigableRepos: () => ({ repos: mocks.repos, isLoading: false, refetch: vi.fn() }),
 }))
@@ -113,30 +136,6 @@ vi.mock('@/stores/sessionStatusStore', async (importOriginal) => {
   return { ...actual, useSessionStatusForSession: () => ({ type: 'idle' }) }
 })
 
-function session(id: string, title: string, directory: string, updated = Date.now()): Session {
-  return {
-    id,
-    projectID: 'proj',
-    title,
-    time: { created: updated, updated },
-    location: { directory },
-    cost: 0,
-    tokens: {},
-  } as unknown as Session
-}
-
-function repo(id: number, name: string, fullPath: string): Repo {
-  return {
-    id,
-    name,
-    localPath: fullPath,
-    fullPath,
-    defaultBranch: 'main',
-    cloneStatus: 'ready',
-    clonedAt: 0,
-  }
-}
-
 function activeWorkItem(
   id: string,
   title: string,
@@ -144,7 +143,7 @@ function activeWorkItem(
   state: ActiveWorkState = 'recent',
 ): ActiveWorkItem {
   const itemRepo = mocks.repos.find((candidate) => candidate.fullPath === directory) ?? mocks.repos[0]
-  const itemSession = session(id, title, directory)
+  const itemSession = makeSession(id, title, directory)
   return {
     key: `${directory}:${id}`,
     session: itemSession,
@@ -202,7 +201,7 @@ const openProjectsTab = () => {
 }
 
 const openActiveTab = () => {
-  fireEvent.mouseDown(screen.getByRole('tab', { name: 'Active' }))
+  fireEvent.mouseDown(screen.getByRole('tab', { name: 'Activity' }))
 }
 
 describe('SessionPickerDialog', () => {
@@ -212,14 +211,16 @@ describe('SessionPickerDialog', () => {
     localStorage.clear()
     mocks.deleteSessionMock.mockResolvedValue(undefined)
     mocks.deletedSessionServerId = null
+    mocks.createSessionDirectories.length = 0
     mocks.locationData = {
       directory: '/w/a',
       project: { id: 'global', directory: '/w/a', canonical: '/w/a' },
     }
     mocks.getOpenCodeLocation.mockResolvedValue(mocks.locationData)
     mocks.lastProject = undefined
+    mocks.lastSessionServerId = null
     mocks.sessionPins = []
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.sessionsData = []
     mocks.activeWorkGroups = { needsInput: [], running: [], recent: [] }
     mocks.activeWorkWindowMs = 0
@@ -232,8 +233,8 @@ describe('SessionPickerDialog', () => {
 
   it('opens with the active session as the cursor and marks it with a dot', () => {
     mocks.sessionsData = [
-      session('ses_active', 'Active session', '/w/a', 3000),
-      session('ses_other', 'Other session', '/w/a', 2000),
+      makeSession('ses_active', 'Active session', '/w/a', 3000),
+      makeSession('ses_other', 'Other session', '/w/a', 2000),
     ]
 
     renderPicker({ activeSessionID: 'ses_active' })
@@ -247,8 +248,8 @@ describe('SessionPickerDialog', () => {
 
   it('filters rows immediately as the query is typed', () => {
     mocks.sessionsData = [
-      session('ses_alpha', 'alpha task', '/w/a', 2000),
-      session('ses_beta', 'beta task', '/w/a', 1000),
+      makeSession('ses_alpha', 'alpha task', '/w/a', 2000),
+      makeSession('ses_beta', 'beta task', '/w/a', 1000),
     ]
 
     renderPicker()
@@ -261,9 +262,9 @@ describe('SessionPickerDialog', () => {
 
   it('moves the cursor with arrow keys and Ctrl+N/Ctrl+P, wrapping, and opens the row on Enter', () => {
     mocks.sessionsData = [
-      session('ses_1', 'First', '/w/a', 3000),
-      session('ses_2', 'Second', '/w/a', 2000),
-      session('ses_3', 'Third', '/w/a', 1000),
+      makeSession('ses_1', 'First', '/w/a', 3000),
+      makeSession('ses_2', 'Second', '/w/a', 2000),
+      makeSession('ses_3', 'Third', '/w/a', 1000),
     ]
     const { onSelectSession } = renderPicker()
 
@@ -297,14 +298,15 @@ describe('SessionPickerDialog', () => {
 
   it('toggles scope with Ctrl+A, persists it, queries every repo directory and shows repo labels', () => {
     mocks.sessionsData = [
-      session('ses_a', 'Alpha session', '/w/a', 2000),
-      session('ses_b', 'Beta session', '/w/b', 1000),
+      makeSession('ses_a', 'Alpha session', '/w/a', 2000),
+      makeSession('ses_b', 'Beta session', '/w/b', 1000),
     ]
 
     renderPicker()
 
     expect(mocks.lastDirectories).toEqual(['/w/a'])
     expect(mocks.lastAllDirectories).toBe(false)
+    expect(screen.getByRole('tab', { name: 'This project' })).toBeInTheDocument()
     expect(screen.getByText('Alpha session')).toBeInTheDocument()
     expect(screen.queryByText('Beta session')).not.toBeInTheDocument()
 
@@ -313,6 +315,7 @@ describe('SessionPickerDialog', () => {
     expect(mocks.lastDirectories).toEqual(['/w/a', '/w/b'])
     expect(mocks.lastAllDirectories).toBe(true)
     expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('true')
+    expect(screen.getByRole('tab', { name: 'All sessions' })).toBeInTheDocument()
     expect(screen.getByText('Beta session')).toBeInTheDocument()
     expect(screen.getByText('alpha')).toBeInTheDocument()
     expect(screen.getByText('beta')).toBeInTheDocument()
@@ -321,18 +324,127 @@ describe('SessionPickerDialog', () => {
     expect(mocks.lastDirectories).toEqual(['/w/a'])
     expect(mocks.lastAllDirectories).toBe(false)
     expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('false')
+    expect(screen.getByRole('tab', { name: 'This project' })).toBeInTheDocument()
+  })
+
+  it('toggles the scope when the selected sessions tab is clicked again', async () => {
+    const user = userEvent.setup()
+    renderPicker()
+
+    await user.click(screen.getByRole('tab', { name: 'This project' }))
+
+    expect(screen.getByRole('tab', { name: 'All sessions', selected: true })).toBeInTheDocument()
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('true')
+
+    await user.click(screen.getByRole('tab', { name: 'All sessions' }))
+
+    expect(screen.getByRole('tab', { name: 'This project', selected: true })).toBeInTheDocument()
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('false')
+  })
+
+  it('selects the sessions tab without toggling the scope when it was not selected', async () => {
+    const user = userEvent.setup()
+    renderPicker()
+
+    await user.click(screen.getByRole('tab', { name: 'Activity' }))
+    await user.click(screen.getByRole('tab', { name: 'This project' }))
+
+    expect(screen.getByRole('tab', { name: 'This project', selected: true })).toBeInTheDocument()
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBeNull()
+  })
+
+  it('toggles the scope with Enter on the focused selected sessions tab', async () => {
+    const user = userEvent.setup()
+    renderPicker()
+
+    await waitFor(() => expect(combobox()).toHaveFocus())
+
+    const sessionsTab = screen.getByRole('tab', { name: 'This project' })
+    act(() => {
+      sessionsTab.focus()
+    })
+    expect(sessionsTab).toHaveFocus()
+
+    await user.keyboard('{Enter}')
+
+    expect(await screen.findByRole('tab', { name: 'All sessions', selected: true })).toBeInTheDocument()
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('true')
+  })
+
+  it('labels the sessions tab Sessions and lists every project without a current repo', () => {
+    mocks.sessionsData = [
+      makeSession('ses_a', 'Alpha session', '/w/a', 2000),
+      makeSession('ses_b', 'Beta session', '/w/b', 1000),
+    ]
+
+    renderPicker({ currentRepo: undefined })
+
+    expect(screen.getByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+    expect(mocks.lastDirectories).toEqual(['/w/a', '/w/b'])
+    expect(mocks.lastAllDirectories).toBe(true)
+    expect(screen.getByText('Beta session')).toBeInTheDocument()
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBeNull()
+  })
+
+  it('leaves the persisted scope preference unchanged on Ctrl+A without a current repo', () => {
+    localStorage.setItem('oc:session-picker:all-projects', 'false')
+
+    renderPicker({ currentRepo: undefined })
+
+    fireEvent.keyDown(combobox(), { key: 'a', ctrlKey: true })
+
+    expect(localStorage.getItem('oc:session-picker:all-projects')).toBe('false')
+    expect(mocks.lastAllDirectories).toBe(true)
+    expect(screen.getByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+  })
+
+  it('starts a new session in the current repo from the sessions tab header action', () => {
+    const onNavigate = vi.fn()
+    renderPicker({ onNavigate })
+
+    fireEvent.click(screen.getByRole('button', { name: 'New session in alpha' }))
+
+    expect(mocks.createSessionDirectories).toEqual(['/w/a'])
+    expect(onNavigate).toHaveBeenCalledWith('/repos/1/sessions/ses_new')
+  })
+
+  it('opens the add repository dialog from the projects tab header action', async () => {
+    renderPicker()
+
+    openProjectsTab()
+    fireEvent.click(await screen.findByRole('button', { name: 'Add repository' }))
+
+    expect(await screen.findByRole('dialog', { name: 'Add Repository' })).toBeInTheDocument()
+  })
+
+  it('starts a new session in a project row and marks a repo that is not ready', async () => {
+    const onNavigate = vi.fn()
+    mocks.repos = [
+      makeRepo(1, 'alpha', '/w/a'),
+      { ...makeRepo(2, 'beta', '/w/b'), cloneStatus: 'cloning' },
+    ]
+    renderPicker({ onNavigate })
+
+    openProjectsTab()
+
+    fireEvent.click(await screen.findByRole('button', { name: 'New session in alpha' }))
+
+    expect(mocks.createSessionDirectories).toEqual(['/w/a'])
+    expect(onNavigate).toHaveBeenCalledWith('/repos/1/sessions/ses_new')
+    expect(screen.queryByRole('button', { name: 'New session in beta' })).not.toBeInTheDocument()
+    expect(screen.getByText('Not ready')).toBeInTheDocument()
   })
 
   it('lists project sessions across worktrees and labels them with the folder name', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a')]
     mocks.locationData = {
       directory: '/w/a',
       project: { id: 'proj_x', directory: '/w/a', canonical: '/w/a' },
     }
     mocks.sessionsData = [
-      session('ses_root', 'Root session', '/w/a', 3000),
-      session('ses_wt', 'Worktree session', '/w/.opencode/state/opencode/worktree/proj_x/test', 2000),
-      session('ses_schedule', 'Schedule session', '/w/schedule-worktrees/job-11-run-361', 1000),
+      makeSession('ses_root', 'Root session', '/w/a', 3000),
+      makeSession('ses_wt', 'Worktree session', '/w/.opencode/state/opencode/worktree/proj_x/test', 2000),
+      makeSession('ses_schedule', 'Schedule session', '/w/schedule-worktrees/job-11-run-361', 1000),
     ]
 
     renderPicker()
@@ -351,10 +463,10 @@ describe('SessionPickerDialog', () => {
   })
 
   it('falls back to the repo directory listing when the location project is global', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.sessionsData = [
-      session('ses_a', 'Alpha session', '/w/a', 2000),
-      session('ses_b', 'Beta session', '/w/b', 1000),
+      makeSession('ses_a', 'Alpha session', '/w/a', 2000),
+      makeSession('ses_b', 'Beta session', '/w/b', 1000),
     ]
 
     renderPicker()
@@ -366,12 +478,12 @@ describe('SessionPickerDialog', () => {
   })
 
   it('falls back to the repo directory listing when the location lookup fails', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.locationData = undefined
     mocks.getOpenCodeLocation.mockRejectedValue(new Error('location unavailable'))
     mocks.sessionsData = [
-      session('ses_a', 'Alpha session', '/w/a', 2000),
-      session('ses_b', 'Beta session', '/w/b', 1000),
+      makeSession('ses_a', 'Alpha session', '/w/a', 2000),
+      makeSession('ses_b', 'Beta session', '/w/b', 1000),
     ]
 
     renderPicker()
@@ -387,7 +499,7 @@ describe('SessionPickerDialog', () => {
       | undefined
     mocks.locationData = undefined
     mocks.getOpenCodeLocation.mockReturnValue(new Promise((resolve) => { resolveLocation = resolve }))
-    mocks.sessionsData = [session('ses_a', 'Alpha session', '/w/a', 2000)]
+    mocks.sessionsData = [makeSession('ses_a', 'Alpha session', '/w/a', 2000)]
 
     renderPicker()
 
@@ -406,7 +518,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('does not query sessions while closed and queries after opening', async () => {
-    mocks.sessionsData = [session('ses_1', 'First', '/w/a', 3000)]
+    mocks.sessionsData = [makeSession('ses_1', 'First', '/w/a', 3000)]
 
     function Host() {
       const [open, setOpen] = useState(false)
@@ -436,8 +548,8 @@ describe('SessionPickerDialog', () => {
 
   it('deletes on a second Ctrl+D and clears the pending state on a move', async () => {
     mocks.sessionsData = [
-      session('ses_1', 'First', '/w/a', 3000),
-      session('ses_2', 'Second', '/w/a', 2000),
+      makeSession('ses_1', 'First', '/w/a', 3000),
+      makeSession('ses_2', 'Second', '/w/a', 2000),
     ]
     const { onDeleteActiveSession } = renderPicker()
 
@@ -461,7 +573,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('notifies when the active session is deleted before the delete completes', async () => {
-    mocks.sessionsData = [session('ses_active', 'Active', '/w/a', 3000)]
+    mocks.sessionsData = [makeSession('ses_active', 'Active', '/w/a', 3000)]
     let resolveDelete: () => void = () => undefined
     mocks.deleteSessionMock.mockReturnValue(
       new Promise<void>((resolve) => {
@@ -483,8 +595,8 @@ describe('SessionPickerDialog', () => {
 
   it('moves the cursor when a mouse pointer moves over a row', () => {
     mocks.sessionsData = [
-      session('ses_1', 'First', '/w/a', 3000),
-      session('ses_2', 'Second', '/w/a', 2000),
+      makeSession('ses_1', 'First', '/w/a', 3000),
+      makeSession('ses_2', 'Second', '/w/a', 2000),
     ]
     renderPicker()
 
@@ -497,7 +609,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('opens the delete confirmation from the row menu', async () => {
-    mocks.sessionsData = [session('ses_1', 'First', '/w/a', 3000)]
+    mocks.sessionsData = [makeSession('ses_1', 'First', '/w/a', 3000)]
     renderPicker()
     const user = userEvent.setup()
 
@@ -509,8 +621,8 @@ describe('SessionPickerDialog', () => {
 
   it('groups older sessions under per-day headings', () => {
     mocks.sessionsData = [
-      session('ses_jan2', 'Jan two', '/w/a', new Date(2020, 0, 2, 12).getTime()),
-      session('ses_jan1', 'Jan one', '/w/a', new Date(2020, 0, 1, 12).getTime()),
+      makeSession('ses_jan2', 'Jan two', '/w/a', new Date(2020, 0, 2, 12).getTime()),
+      makeSession('ses_jan1', 'Jan one', '/w/a', new Date(2020, 0, 1, 12).getTime()),
     ]
 
     renderPicker()
@@ -521,8 +633,8 @@ describe('SessionPickerDialog', () => {
 
   it('resets the query and cursor on reopen', async () => {
     mocks.sessionsData = [
-      session('ses_active', 'Active session', '/w/a', 3000),
-      session('ses_other', 'Other session', '/w/a', 2000),
+      makeSession('ses_active', 'Active session', '/w/a', 3000),
+      makeSession('ses_other', 'Other session', '/w/a', 2000),
     ]
 
     function Host() {
@@ -556,11 +668,11 @@ describe('SessionPickerDialog', () => {
     expect(screen.getByRole('option', { name: /Active session/ })).toHaveAttribute('aria-selected', 'true')
   })
 
-  it('renders an Active/Sessions/Projects tab switcher and defaults to the sessions tab', () => {
+  it('renders an Activity/Sessions/Projects tab switcher and defaults to the sessions tab', () => {
     renderPicker()
 
-    expect(screen.getByRole('tab', { name: 'Sessions' })).toHaveAttribute('aria-selected', 'true')
-    expect(screen.getByRole('tab', { name: 'Active' })).toHaveAttribute('aria-selected', 'false')
+    expect(screen.getByRole('tab', { name: 'This project' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByRole('tab', { name: 'Activity' })).toHaveAttribute('aria-selected', 'false')
     expect(screen.getByRole('tab', { name: 'Projects' })).toHaveAttribute('aria-selected', 'false')
     expect(combobox()).toHaveAttribute('placeholder', 'Search sessions...')
   })
@@ -568,7 +680,7 @@ describe('SessionPickerDialog', () => {
   it('exposes a tabpanel labelled by the active tab and swaps panels on tab switch', async () => {
     renderPicker()
 
-    const sessionsPanel = screen.getByRole('tabpanel', { name: 'Sessions' })
+    const sessionsPanel = screen.getByRole('tabpanel', { name: 'This project' })
     expect(sessionsPanel).toHaveAttribute('data-state', 'active')
     expect(screen.queryByRole('tabpanel', { name: 'Projects' })).not.toBeInTheDocument()
 
@@ -576,11 +688,11 @@ describe('SessionPickerDialog', () => {
 
     const projectsPanel = await screen.findByRole('tabpanel', { name: 'Projects' })
     expect(projectsPanel).toHaveAttribute('data-state', 'active')
-    expect(screen.queryByRole('tabpanel', { name: 'Sessions' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('tabpanel', { name: 'This project' })).not.toBeInTheDocument()
   })
 
   it('focuses the projects search input after clicking the Projects tab and filters on typing', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const user = userEvent.setup()
     renderPicker()
 
@@ -595,7 +707,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('focuses the projects search input after switching tabs with the shortcut', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const user = userEvent.setup()
     renderPicker()
 
@@ -607,7 +719,7 @@ describe('SessionPickerDialog', () => {
 
   it('focuses the projects search input after the switch shortcut on a coarse pointer device', async () => {
     stubMatchMedia(false)
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const user = userEvent.setup()
     renderPicker()
 
@@ -619,7 +731,7 @@ describe('SessionPickerDialog', () => {
 
   it('does not focus the projects search input when switching tabs by pointer on a coarse pointer device', async () => {
     stubMatchMedia(false)
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const user = userEvent.setup()
     renderPicker()
 
@@ -629,7 +741,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('lists repos in the projects tab and opens the cursor repo on Enter', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const { onSelectRepo } = renderPicker()
 
     openProjectsTab()
@@ -645,7 +757,7 @@ describe('SessionPickerDialog', () => {
 
   it('navigates the projects tab with wrapping arrows, PageUp/PageDown and Enter', async () => {
     mocks.repos = Array.from({ length: 12 }, (_, index) =>
-      repo(index + 1, `repo-${index + 1}`, `/w/r${index + 1}`),
+      makeRepo(index + 1, `repo-${index + 1}`, `/w/r${index + 1}`),
     )
     const { onSelectRepo } = renderPicker()
 
@@ -673,7 +785,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('opens a repo on click in the projects tab', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     const { onSelectRepo } = renderPicker()
 
     openProjectsTab()
@@ -685,8 +797,8 @@ describe('SessionPickerDialog', () => {
 
   it('filters projects by name and branch', async () => {
     mocks.repos = [
-      { ...repo(1, 'alpha', '/w/a'), currentBranch: 'feature/x' },
-      repo(2, 'beta', '/w/b'),
+      { ...makeRepo(1, 'alpha', '/w/a'), currentBranch: 'feature/x' },
+      makeRepo(2, 'beta', '/w/b'),
     ]
     renderPicker()
 
@@ -713,19 +825,19 @@ describe('SessionPickerDialog', () => {
     expect(screen.getByText('No projects found')).toBeInTheDocument()
   })
 
-  it('cycles Active, Sessions and Projects with the default Ctrl+S binding', async () => {
+  it('cycles Activity, Sessions and Projects with the default Ctrl+S binding', async () => {
     renderPicker()
 
-    expect(screen.getByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'This project', selected: true })).toBeInTheDocument()
 
     fireEvent.keyDown(combobox(), { key: 's', ctrlKey: true })
     expect(await screen.findByRole('tab', { name: 'Projects', selected: true })).toBeInTheDocument()
 
     fireEvent.keyDown(combobox(), { key: 's', ctrlKey: true })
-    expect(await screen.findByRole('tab', { name: 'Active', selected: true })).toBeInTheDocument()
+    expect(await screen.findByRole('tab', { name: 'Activity', selected: true })).toBeInTheDocument()
 
     fireEvent.keyDown(combobox(), { key: 's', ctrlKey: true })
-    expect(await screen.findByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+    expect(await screen.findByRole('tab', { name: 'This project', selected: true })).toBeInTheDocument()
   })
 
   it('honors a configured switch binding and shows it in the footer', async () => {
@@ -756,7 +868,7 @@ describe('SessionPickerDialog', () => {
 
     fireEvent.keyDown(combobox(), { key: 'o', ctrlKey: true })
 
-    expect(screen.getByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'This project', selected: true })).toBeInTheDocument()
   })
 
   it('resets to the sessions tab when the dialog reopens', async () => {
@@ -787,12 +899,12 @@ describe('SessionPickerDialog', () => {
     fireEvent.click(screen.getByText('open-picker'))
 
     await waitFor(() =>
-      expect(screen.getByRole('tab', { name: 'Sessions' })).toHaveAttribute('aria-selected', 'true'),
+      expect(screen.getByRole('tab', { name: 'This project' })).toHaveAttribute('aria-selected', 'true'),
     )
   })
 
   it('groups active work into needs input, running and recent sections with repo labels', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.activeWorkGroups = {
       needsInput: [activeWorkItem('ses_ni', 'Needs input task', '/w/a', 'needs-input')],
       running: [activeWorkItem('ses_run', 'Running task', '/w/b', 'running')],
@@ -838,7 +950,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('opens the cursor active row with Enter and selects its session and repo', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.activeWorkGroups = {
       needsInput: [],
       running: [activeWorkItem('ses_run', 'Running task', '/w/b', 'running')],
@@ -859,7 +971,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('filters active work rows by title and drops sections left empty', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.activeWorkGroups = {
       needsInput: [activeWorkItem('ses_ni', 'Needs input task', '/w/a', 'needs-input')],
       running: [],
@@ -879,7 +991,7 @@ describe('SessionPickerDialog', () => {
   })
 
   it('pins an active work row from the shared row menu', async () => {
-    mocks.repos = [repo(1, 'alpha', '/w/a'), repo(2, 'beta', '/w/b')]
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
     mocks.activeWorkGroups = {
       needsInput: [],
       running: [activeWorkItem('ses_run', 'Running task', '/w/b', 'running')],
@@ -902,11 +1014,11 @@ describe('SessionPickerDialog', () => {
 
   describe('linked-server mode', () => {
     beforeEach(() => {
-      mocks.repos = [repo(1, 'alpha', '/w/a')]
-      mocks.sessionsData = [session('ses_remote', 'Remote session', '/home/me/app')]
+      mocks.repos = [makeRepo(1, 'alpha', '/w/a')]
+      mocks.sessionsData = [makeSession('ses_remote', 'Remote session', '/home/me/app')]
     })
 
-    it('lists the project sessions without Manager-only tabs and reports the chosen server session', async () => {
+    it('lists the project sessions with the linked server projects tab and reports the chosen server session', async () => {
       const onSelectRemoteSession = vi.fn()
       renderPicker({
         remote: {
@@ -917,8 +1029,8 @@ describe('SessionPickerDialog', () => {
         onSelectRemoteSession,
       })
 
-      expect(screen.queryByRole('tab', { name: 'Projects' })).not.toBeInTheDocument()
-      expect(screen.getByRole('tab', { name: 'Active' })).toBeInTheDocument()
+      expect(screen.getByRole('tab', { name: 'Projects' })).toBeInTheDocument()
+      expect(screen.getByRole('tab', { name: 'Activity' })).toBeInTheDocument()
 
       const row = await screen.findByRole('option', { name: /Remote session/ })
       expect(row).toHaveTextContent('Kitchen')
@@ -931,13 +1043,33 @@ describe('SessionPickerDialog', () => {
       )
     })
 
+    it('renders the linked server projects tab through the shared activity-ordered project list', async () => {
+      renderPicker({
+        remote: { serverId: 'srv_kitchen', serverName: 'Kitchen', projectDirectory: '/home/me/app' },
+      })
+
+      openProjectsTab()
+
+      const nav = await screen.findByTestId('remote-project-nav')
+      expect(nav).toHaveAttribute('data-server', 'srv_kitchen')
+    })
+
+    it('queries the linked server sessions without a host-supplied server provider', async () => {
+      renderPicker({
+        remote: { serverId: 'srv-1', serverName: 'Kitchen', projectDirectory: '/home/me/app' },
+      })
+
+      expect(await screen.findByRole('option', { name: /Remote session/ })).toBeInTheDocument()
+      expect(mocks.lastSessionServerId).toBe('srv-1')
+    })
+
     it('navigates a remote active work row through the owning server', async () => {
       const onSelectRemoteSession = vi.fn()
       mocks.activeWorkGroups = {
         needsInput: [
           {
             key: '/home/me/app/ses_remote',
-            session: session('ses_remote', 'Remote pending', '/home/me/app'),
+            session: makeSession('ses_remote', 'Remote pending', '/home/me/app'),
             repo: null,
             serverId: 'srv_kitchen',
             serverName: 'Kitchen',
diff --git a/frontend/src/components/session/SessionPickerDialog.tsx b/frontend/src/components/session/SessionPickerDialog.tsx
index 9f772d7d0..9e428d226 100644
--- a/frontend/src/components/session/SessionPickerDialog.tsx
+++ b/frontend/src/components/session/SessionPickerDialog.tsx
@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { format, startOfDay } from 'date-fns'
-import { MoreHorizontal, Pin, PinOff } from 'lucide-react'
+import { ChevronsUpDown, MoreHorizontal, Pin, PinOff, Plus } from 'lucide-react'
 import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
-import { getOpenCodeLocation } from '@/api/opencode'
 import { OpenCodeServerProvider, useOpenCodeServerId } from '@/contexts/OpenCodeServerContext'
-import { serverScopedKey } from '@/lib/serverScope'
+import { openCodeLocationQueryOptions } from '@/lib/openCodeLocation'
 import type { Repo, Session } from '@/api/types'
 import { ACTIVE_WORK_GROUPS, MS_PER_MINUTE, formatActivityEmptyMessage } from '@/lib/activeWork'
 import { Button } from '@/components/ui/button'
@@ -20,6 +19,9 @@ import { SessionStatusIndicator } from '@/components/ui/session-status-indicator
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { DeleteSessionDialog } from '@/components/session/DeleteSessionDialog'
 import { ProjectPickerContent } from '@/components/session/ProjectPickerContent'
+import { AddRepoDialog } from '@/components/repo/AddRepoDialog'
+import { LocalRepoNewSessionButton } from '@/components/navigation/RepoSessionNav'
+import { RemoteProjectNavList } from '@/components/navigation/RemoteProjectNav'
 import {
   PickerSearchBar,
   optionId,
@@ -27,7 +29,7 @@ import {
   usePickerKeyNav,
 } from '@/components/session/usePickerKeyboardNav'
 import { partitionSessions } from '@/components/session/session-partition'
-import { buildRepoByDirectory } from '@/components/navigation/sidebar-session-tree'
+import { buildRepoByDirectory, isRepoReady } from '@/components/navigation/sidebar-session-tree'
 import { useDeleteSession } from '@/hooks/useOpenCode'
 import { useActiveWork, useActivityWindowMinutes } from '@/hooks/useActiveWork'
 import { useSessionSearch } from '@/hooks/useSessionSearch'
@@ -49,10 +51,9 @@ const NEAR_BOTTOM_PX = 240
 type SessionPickerTab = 'active' | 'sessions' | 'projects'
 
 const SESSION_PICKER_TABS: SessionPickerTab[] = ['active', 'sessions', 'projects']
-const REMOTE_SESSION_PICKER_TABS: SessionPickerTab[] = ['active', 'sessions']
 
 const SESSION_PICKER_TAB_LABELS: Record<SessionPickerTab, string> = {
-  active: 'Active',
+  active: 'Activity',
   sessions: 'Sessions',
   projects: 'Projects',
 }
@@ -62,23 +63,25 @@ function nextSessionPickerTab(tab: SessionPickerTab, tabs: SessionPickerTab[]):
   return tabs[(index + 1) % tabs.length]
 }
 
-interface RemotePickerScope {
+function sessionsTabLabel(scopeEnabled: boolean, allProjects: boolean): string {
+  if (!scopeEnabled) return SESSION_PICKER_TAB_LABELS.sessions
+  return allProjects ? 'All sessions' : 'This project'
+}
+
+export interface RemotePickerScope {
   serverId: string
   serverName?: string
+  /** Canonical project directory in view; omitted when the route scopes to the whole server. */
   projectDirectory?: string
+  /** Whether the route's project directory is still resolving, which holds the all-sessions search. */
+  isPending?: boolean
 }
 
-interface SessionPickerDialogProps {
-  open: boolean
+type SessionPickerDialogProps = Omit<
+  SessionPickerPanelProps,
+  'searchTrailing' | 'onAddRepo' | 'renderTitle'
+> & {
   onOpenChange: (open: boolean) => void
-  currentRepo: Repo | undefined
-  activeSessionID?: string
-  onSelectSession: (session: Session, repo: Repo) => void
-  onSelectRemoteSession?: (session: Session, serverId: string) => void
-  onDeleteActiveSession: () => void
-  onSelectRepo: (repo: Repo) => void
-  /** Set on a linked-server route to list that server's sessions instead of Manager repos. */
-  remote?: RemotePickerScope
 }
 
 interface SessionPickerRow {
@@ -556,9 +559,12 @@ interface SessionPickerContentProps {
   onSelectSession: (session: Session, repo: Repo) => void
   onSelectRemoteSession?: (session: Session, serverId: string) => void
   onDeleteActiveSession: () => void
+  allProjects: boolean
+  scopeEnabled: boolean
+  onToggleAllProjects?: () => void
   switchHint: string
   searchInputRef: React.RefObject<HTMLInputElement | null>
-  hasFinePointer: boolean
+  searchTrailing?: React.ReactNode
 }
 
 function SessionPickerContent({
@@ -568,11 +574,13 @@ function SessionPickerContent({
   onSelectSession,
   onSelectRemoteSession,
   onDeleteActiveSession,
+  allProjects,
+  scopeEnabled,
+  onToggleAllProjects,
   switchHint,
   searchInputRef,
-  hasFinePointer,
+  searchTrailing,
 }: SessionPickerContentProps) {
-  const [allProjects, toggleAllProjects] = usePersistentBoolean(ALL_PROJECTS_STORAGE_KEY, false)
   const { repos } = useNavigableRepos()
   const listRef = useRef<HTMLDivElement>(null)
   const listId = useId()
@@ -586,10 +594,8 @@ function SessionPickerContent({
 
   const serverId = useOpenCodeServerId()
   const locationQuery = useQuery({
-    queryKey: serverScopedKey(['opencode', 'location', currentRepo?.fullPath], serverId),
-    queryFn: () => getOpenCodeLocation(currentRepo!.fullPath, serverId),
+    ...openCodeLocationQueryOptions(currentRepo?.fullPath ?? '', serverId),
     enabled: !allProjects && Boolean(currentRepo?.fullPath),
-    staleTime: 5 * 60 * 1000,
   })
 
   const location = locationQuery.data
@@ -696,7 +702,7 @@ function SessionPickerContent({
     moveCursor,
     onOpenRow: openRow,
     onDeleteRow: deleteRow,
-    onToggleAllProjects: toggleAllProjects,
+    onToggleAllProjects,
   })
 
   const handleListScroll = useCallback(
@@ -739,23 +745,7 @@ function SessionPickerContent({
           onKeyDown={handleSearchKeyDown}
           placeholder="Search sessions..."
           name="session-picker-search"
-          trailing={
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              aria-pressed={allProjects}
-              onClick={toggleAllProjects}
-              className="h-9 shrink-0"
-            >
-              {allProjects ? 'All projects' : 'This project'}
-              {hasFinePointer && (
-                <kbd className="ml-1 rounded border border-border bg-muted px-1 text-[10px] text-muted-foreground">
-                  Ctrl+A
-                </kbd>
-              )}
-            </Button>
-          }
+          trailing={searchTrailing}
         />
 
         <SessionPickerList
@@ -809,7 +799,8 @@ function SessionPickerContent({
         </SessionPickerList>
 
         <div className="mt-2 shrink-0 px-4 text-xs text-muted-foreground pointer-coarse:hidden sm:px-0">
-          ↑↓ move · Enter open · Ctrl+D delete · Ctrl+A {allProjects ? 'this project' : 'all projects'}
+          ↑↓ move · Enter open · Ctrl+D delete
+          {scopeEnabled ? ` · Ctrl+A ${allProjects ? 'this project' : 'all sessions'}` : ''}
           {switchHint ? ` · ${switchHint} projects` : ''}
         </div>
       </div>
@@ -827,6 +818,7 @@ interface ActivePickerContentProps {
   onDeleteActiveSession: () => void
   switchHint: string
   searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchTrailing?: React.ReactNode
 }
 
 function ActivePickerContent({
@@ -837,6 +829,7 @@ function ActivePickerContent({
   onDeleteActiveSession,
   switchHint,
   searchInputRef,
+  searchTrailing,
 }: ActivePickerContentProps) {
   const windowMinutes = useActivityWindowMinutes()
   const { groups, isLoading, isError } = useActiveWork(windowMinutes * MS_PER_MINUTE)
@@ -950,6 +943,7 @@ function ActivePickerContent({
           onKeyDown={handleSearchKeyDown}
           placeholder="Search sessions..."
           name="active-picker-search"
+          trailing={searchTrailing}
         />
 
         <SessionPickerList
@@ -989,20 +983,24 @@ interface RemoteSessionPickerContentProps {
   open: boolean
   serverName?: string
   projectDirectory?: string
+  isPending?: boolean
   activeSessionID?: string
   onSelectSession: (session: Session) => void
   switchHint: string
   searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchTrailing?: React.ReactNode
 }
 
 function RemoteSessionPickerContent({
   open,
   serverName,
   projectDirectory,
+  isPending = false,
   activeSessionID,
   onSelectSession,
   switchHint,
   searchInputRef,
+  searchTrailing,
 }: RemoteSessionPickerContentProps) {
   const listRef = useRef<HTMLDivElement>(null)
   const listId = useId()
@@ -1019,7 +1017,9 @@ function RemoteSessionPickerContent({
     isFetchingNextPage,
     isFetchNextPageError,
     canFetchNextPage,
-  } = useSessionSearch(projectDirectory ? [projectDirectory] : [])
+  } = useSessionSearch(projectDirectory ? [projectDirectory] : [], {
+    allDirectories: projectDirectory === undefined && !isPending,
+  })
 
   const sections = useMemo(
     () => buildSections(filteredSessions, EMPTY_PINNED_KEYS, getSessionKey),
@@ -1085,6 +1085,7 @@ function RemoteSessionPickerContent({
         onKeyDown={handleSearchKeyDown}
         placeholder="Search sessions..."
         name="remote-session-picker-search"
+        trailing={searchTrailing}
       />
 
       <SessionPickerList
@@ -1146,22 +1147,105 @@ function RemoteSessionPickerContent({
   )
 }
 
-export function SessionPickerDialog({
+interface RemoteProjectPickerContentProps {
+  serverId: string
+  open: boolean
+  searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchTrailing?: React.ReactNode
+  onOpenProject: (path: string) => void
+  onSelectSession: (path: string) => void
+}
+
+function RemoteProjectPickerContent({
+  serverId,
+  open,
+  searchInputRef,
+  searchTrailing,
+  onOpenProject,
+  onSelectSession,
+}: RemoteProjectPickerContentProps) {
+  const listId = useId()
+  const [query, setQuery] = useState('')
+
+  return (
+    <div className="mt-4 flex min-h-0 flex-1 flex-col">
+      <PickerSearchBar
+        inputRef={searchInputRef}
+        listId={listId}
+        open={open}
+        activeDescendantId={undefined}
+        value={query}
+        onChange={setQuery}
+        onKeyDown={() => undefined}
+        placeholder="Search projects..."
+        name="remote-project-picker-search"
+        trailing={searchTrailing}
+      />
+
+      <div className="mt-3 min-h-0 flex-1 overflow-y-auto rounded-md">
+        <RemoteProjectNavList
+          serverId={serverId}
+          isVisible={open}
+          search={query}
+          onOpenProject={onOpenProject}
+          onSelectSession={onSelectSession}
+        />
+      </div>
+    </div>
+  )
+}
+
+export interface SessionPickerPanelProps {
+  open: boolean
+  currentRepo: Repo | undefined
+  activeSessionID?: string
+  onSelectSession: (session: Session, repo: Repo) => void
+  onSelectRemoteSession?: (session: Session, serverId: string) => void
+  onDeleteActiveSession: () => void
+  onSelectRepo: (repo: Repo) => void
+  onNavigate: (path: string) => void
+  /** Set on a linked-server route to list that server's sessions instead of Manager repos. */
+  remote?: RemotePickerScope
+  searchTrailing?: React.ReactNode
+  onAddRepo?: () => void
+  renderTitle?: (label: string) => React.ReactNode
+}
+
+/**
+ * Picker content shared by the desktop dialog and the mobile sheet. A remote scope supplies its own
+ * server, so every host reads the linked server's sessions without wrapping the panel itself.
+ */
+export function SessionPickerPanel(props: SessionPickerPanelProps) {
+  if (!props.remote) return <SessionPickerPanelBody {...props} />
+  return (
+    <OpenCodeServerProvider serverId={props.remote.serverId}>
+      <SessionPickerPanelBody {...props} />
+    </OpenCodeServerProvider>
+  )
+}
+
+function SessionPickerPanelBody({
   open,
-  onOpenChange,
   currentRepo,
   activeSessionID,
   onSelectSession,
   onSelectRemoteSession,
   onDeleteActiveSession,
   onSelectRepo,
+  onNavigate,
   remote,
-}: SessionPickerDialogProps) {
+  searchTrailing,
+  onAddRepo,
+  renderTitle,
+}: SessionPickerPanelProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const activeSearchInputRef = useRef<HTMLInputElement>(null)
   const projectSearchInputRef = useRef<HTMLInputElement>(null)
   const focusSearchAfterSwitchRef = useRef(false)
+  const scopePressRef = useRef(false)
   const hasFinePointer = useMediaQuery(FINE_POINTER_MEDIA_QUERY)
+  const [addRepoOpen, setAddRepoOpen] = useState(false)
+  const [allProjectsPreference, toggleAllProjects] = usePersistentBoolean(ALL_PROJECTS_STORAGE_KEY, false)
   const { preferences } = useSettings()
   const switchHint = useMemo(
     () => {
@@ -1175,21 +1259,22 @@ export function SessionPickerDialog({
     [preferences],
   )
   const isRemote = remote !== undefined
-  const pickerTabs = isRemote ? REMOTE_SESSION_PICKER_TABS : SESSION_PICKER_TABS
-  const [tab, setTab] = useState<SessionPickerTab>('sessions')
+  const [activeTab, setActiveTab] = useState<SessionPickerTab>('sessions')
   const [prevOpen, setPrevOpen] = useState(open)
 
   if (prevOpen !== open) {
     setPrevOpen(open)
-    if (open) setTab('sessions')
+    if (open) setActiveTab('sessions')
   }
 
-  const activeTab: SessionPickerTab = isRemote && tab === 'projects' ? 'sessions' : tab
+  const scopeEnabled = !isRemote && Boolean(currentRepo)
+  const allProjects = scopeEnabled ? allProjectsPreference : true
+  const readyRepo = scopeEnabled && currentRepo && isRepoReady(currentRepo) ? currentRepo : undefined
 
   const toggleTab = useCallback(() => {
     focusSearchAfterSwitchRef.current = true
-    setTab((current) => nextSessionPickerTab(current, pickerTabs))
-  }, [pickerTabs])
+    setActiveTab((current) => nextSessionPickerTab(current, SESSION_PICKER_TABS))
+  }, [])
 
   useShortcutActions({ switchPickerTab: open ? toggleTab : undefined })
 
@@ -1208,6 +1293,186 @@ export function SessionPickerDialog({
     return () => cancelAnimationFrame(frame)
   }, [open, activeTab, hasFinePointer])
 
+  const addRepoButton = isRemote ? null : (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      aria-label="Add repository"
+      onClick={() => {
+        if (onAddRepo) onAddRepo()
+        else setAddRepoOpen(true)
+      }}
+      className="h-9 w-9 shrink-0"
+    >
+      <Plus className="h-4 w-4" />
+    </Button>
+  )
+
+  const newSessionButton = readyRepo ? (
+    <LocalRepoNewSessionButton repo={readyRepo} onOpenSession={onNavigate} />
+  ) : (
+    addRepoButton
+  )
+
+  const withTrailing = (action: React.ReactNode): React.ReactNode => {
+    if (!searchTrailing && !action) return undefined
+    return (
+      <div className="flex shrink-0 items-center gap-1">
+        {searchTrailing}
+        {action}
+      </div>
+    )
+  }
+
+  const sessionsTrailing = withTrailing(newSessionButton)
+  const projectsTrailing = withTrailing(addRepoButton)
+
+  const canToggleScope = scopeEnabled && activeTab === 'sessions'
+
+  /**
+   * The sessions tab re-activates itself to toggle the scope. Pointer activation records whether the
+   * tab was already selected before Radix activates it, so the click that follows only toggles a
+   * tab that was already current. Keyboard activation toggles on Enter/Space directly and suppresses
+   * the click Radix would otherwise synthesize for the same key press.
+   */
+  const handleSessionsPointerDown = () => {
+    scopePressRef.current = canToggleScope
+  }
+
+  const handleSessionsClick = () => {
+    if (!canToggleScope || !scopePressRef.current) return
+    scopePressRef.current = false
+    toggleAllProjects()
+  }
+
+  const handleSessionsKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (!canToggleScope) return
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    toggleAllProjects()
+  }
+
+  return (
+    <>
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as SessionPickerTab)}
+        className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-0"
+      >
+        <div className="shrink-0 px-4 pt-4 sm:px-0 sm:pt-6">
+          {renderTitle?.(SESSION_PICKER_TAB_LABELS[activeTab])}
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="active">{SESSION_PICKER_TAB_LABELS.active}</TabsTrigger>
+            <TabsTrigger
+              value="sessions"
+              onPointerDown={handleSessionsPointerDown}
+              onClick={handleSessionsClick}
+              onKeyDown={handleSessionsKeyDown}
+            >
+              {sessionsTabLabel(scopeEnabled, allProjects)}
+              {scopeEnabled && (
+                <ChevronsUpDown aria-hidden="true" className="ml-1 h-3 w-3 shrink-0 opacity-60" />
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="projects">{SESSION_PICKER_TAB_LABELS.projects}</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent
+          value="active"
+          className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
+        >
+          <OpenCodeServerProvider serverId={LOCAL_OPENCODE_SERVER_ID}>
+            <ActivePickerContent
+              open={open}
+              activeSessionID={activeSessionID}
+              onSelectSession={onSelectSession}
+              onSelectRemoteSession={onSelectRemoteSession}
+              onDeleteActiveSession={onDeleteActiveSession}
+              switchHint={switchHint}
+              searchInputRef={activeSearchInputRef}
+              searchTrailing={sessionsTrailing}
+            />
+          </OpenCodeServerProvider>
+        </TabsContent>
+        <TabsContent
+          value="sessions"
+          className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
+        >
+          {remote ? (
+            <RemoteSessionPickerContent
+              open={open}
+              serverName={remote.serverName}
+              projectDirectory={remote.projectDirectory}
+              isPending={remote.isPending}
+              activeSessionID={activeSessionID}
+              onSelectSession={(session) => onSelectRemoteSession?.(session, remote.serverId)}
+              switchHint={switchHint}
+              searchInputRef={searchInputRef}
+              searchTrailing={sessionsTrailing}
+            />
+          ) : (
+            <SessionPickerContent
+              open={open}
+              currentRepo={currentRepo}
+              activeSessionID={activeSessionID}
+              onSelectSession={onSelectSession}
+              onSelectRemoteSession={onSelectRemoteSession}
+              onDeleteActiveSession={onDeleteActiveSession}
+              allProjects={allProjects}
+              scopeEnabled={scopeEnabled}
+              onToggleAllProjects={scopeEnabled ? toggleAllProjects : undefined}
+              switchHint={switchHint}
+              searchInputRef={searchInputRef}
+              searchTrailing={sessionsTrailing}
+            />
+          )}
+        </TabsContent>
+        <TabsContent
+          value="projects"
+          className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
+        >
+          {remote ? (
+            <RemoteProjectPickerContent
+              serverId={remote.serverId}
+              open={open}
+              searchInputRef={projectSearchInputRef}
+              searchTrailing={projectsTrailing}
+              onOpenProject={onNavigate}
+              onSelectSession={onNavigate}
+            />
+          ) : (
+            <ProjectPickerContent
+              open={open}
+              currentRepo={currentRepo}
+              onSelectRepo={onSelectRepo}
+              onNavigate={onNavigate}
+              switchHint={switchHint}
+              searchInputRef={projectSearchInputRef}
+              searchTrailing={projectsTrailing}
+            />
+          )}
+        </TabsContent>
+      </Tabs>
+      {addRepoOpen && !onAddRepo && <AddRepoDialog open onOpenChange={setAddRepoOpen} />}
+    </>
+  )
+}
+
+export function SessionPickerDialog({
+  open,
+  onOpenChange,
+  currentRepo,
+  activeSessionID,
+  onSelectSession,
+  onSelectRemoteSession,
+  onDeleteActiveSession,
+  onSelectRepo,
+  onNavigate,
+  remote,
+}: SessionPickerDialogProps) {
+  const hasFinePointer = useMediaQuery(FINE_POINTER_MEDIA_QUERY)
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
@@ -1216,85 +1481,23 @@ export function SessionPickerDialog({
         onEscapeKeyDown={() => onOpenChange(false)}
         onOpenAutoFocus={(event) => {
           event.preventDefault()
-          if (hasFinePointer) {
-            searchInputRef.current?.focus()
-          } else {
+          if (!hasFinePointer) {
             ;(event.currentTarget as HTMLElement).focus()
           }
         }}
       >
-        <Tabs
-          value={activeTab}
-          onValueChange={(value) => setTab(value as SessionPickerTab)}
-          className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-0"
-        >
-          <div className="shrink-0 px-4 pt-4 sm:px-0 sm:pt-6">
-            <DialogTitle className="sr-only">{SESSION_PICKER_TAB_LABELS[activeTab]}</DialogTitle>
-            <TabsList>
-              <TabsTrigger value="active">Active</TabsTrigger>
-              <TabsTrigger value="sessions">Sessions</TabsTrigger>
-              {isRemote ? null : <TabsTrigger value="projects">Projects</TabsTrigger>}
-            </TabsList>
-          </div>
-          <TabsContent
-            value="active"
-            className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
-          >
-            <OpenCodeServerProvider serverId={LOCAL_OPENCODE_SERVER_ID}>
-              <ActivePickerContent
-                open={open}
-                activeSessionID={activeSessionID}
-                onSelectSession={onSelectSession}
-                onSelectRemoteSession={onSelectRemoteSession}
-                onDeleteActiveSession={onDeleteActiveSession}
-                switchHint={switchHint}
-                searchInputRef={activeSearchInputRef}
-              />
-            </OpenCodeServerProvider>
-          </TabsContent>
-          <TabsContent
-            value="sessions"
-            className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
-          >
-            {remote ? (
-              <RemoteSessionPickerContent
-                open={open}
-                serverName={remote.serverName}
-                projectDirectory={remote.projectDirectory}
-                activeSessionID={activeSessionID}
-                onSelectSession={(session) => onSelectRemoteSession?.(session, remote.serverId)}
-                switchHint={switchHint}
-                searchInputRef={searchInputRef}
-              />
-            ) : (
-              <SessionPickerContent
-                open={open}
-                currentRepo={currentRepo}
-                activeSessionID={activeSessionID}
-                onSelectSession={onSelectSession}
-                onSelectRemoteSession={onSelectRemoteSession}
-                onDeleteActiveSession={onDeleteActiveSession}
-                switchHint={switchHint}
-                searchInputRef={searchInputRef}
-                hasFinePointer={hasFinePointer}
-              />
-            )}
-          </TabsContent>
-          {isRemote ? null : (
-            <TabsContent
-              value="projects"
-              className="mt-0 flex min-h-0 w-full min-w-0 flex-1 flex-col px-0"
-            >
-              <ProjectPickerContent
-                open={open}
-                currentRepo={currentRepo}
-                onSelectRepo={onSelectRepo}
-                switchHint={switchHint}
-                searchInputRef={projectSearchInputRef}
-              />
-            </TabsContent>
-          )}
-        </Tabs>
+        <SessionPickerPanel
+          open={open}
+          currentRepo={currentRepo}
+          activeSessionID={activeSessionID}
+          onSelectSession={onSelectSession}
+          onSelectRemoteSession={onSelectRemoteSession}
+          onDeleteActiveSession={onDeleteActiveSession}
+          onSelectRepo={onSelectRepo}
+          onNavigate={onNavigate}
+          remote={remote}
+          renderTitle={(label) => <DialogTitle className="sr-only">{label}</DialogTitle>}
+        />
       </DialogContent>
     </Dialog>
   )
diff --git a/frontend/src/components/session/SessionPickerSheet.test.tsx b/frontend/src/components/session/SessionPickerSheet.test.tsx
new file mode 100644
index 000000000..33ec181d9
--- /dev/null
+++ b/frontend/src/components/session/SessionPickerSheet.test.tsx
@@ -0,0 +1,488 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import type { Repo, Session } from '@/api/types'
+import type { ActiveWorkGroups, ActiveWorkItem } from '@/lib/activeWork'
+import { DEFAULT_ACTIVITY_WINDOW_MINUTES } from '@/api/types/settings'
+import { KeyboardShortcutsProvider } from '@/contexts/KeyboardShortcutsContext'
+import { useSidebarServerStore } from '@/stores/sidebarServerStore'
+import { LocationCatcher, stubMatchMedia } from '@/test/test-utils'
+import { makeRepo, makeSession } from '@/test/fixtures/session-picker'
+import { SessionPickerSheet } from './SessionPickerSheet'
+
+const mocks = vi.hoisted(() => ({
+  sessionsData: [] as Session[],
+  lastDirectories: [] as string[],
+  lastAllDirectories: false,
+  createSessionDirectories: [] as string[],
+  deleteSessionMock: vi.fn(),
+  locationData: undefined as
+    | { directory: string; project: { id: string; directory: string; canonical: string } }
+    | undefined,
+  getOpenCodeLocation: vi.fn(),
+  listProjects: vi.fn(),
+  getSession: vi.fn(),
+  repos: [] as Repo[],
+  activeWorkGroups: { needsInput: [], running: [], recent: [] } as ActiveWorkGroups,
+}))
+
+vi.mock('@/hooks/useSettings', () => ({
+  useSettings: () => ({ preferences: undefined }),
+}))
+
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return {
+    ...actual,
+    getOpenCodeLocation: mocks.getOpenCodeLocation,
+    listProjects: mocks.listProjects,
+    getSession: mocks.getSession,
+  }
+})
+
+vi.mock('@/api/repos', () => ({
+  listRepos: vi.fn().mockResolvedValue([]),
+  createRepo: vi.fn(),
+  discoverRepos: vi.fn(),
+}))
+
+vi.mock('@/hooks/useOpenCode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/hooks/useOpenCode')>()
+  return {
+    ...actual,
+    useSessionsAcrossDirectories: (
+      directories: string[],
+      options?: { search?: string; allDirectories?: boolean },
+    ) => {
+      mocks.lastDirectories = directories
+      mocks.lastAllDirectories = options?.allDirectories ?? false
+      const search = options?.search?.toLowerCase() ?? ''
+      const base = directories.length === 0 && !options?.allDirectories ? [] : mocks.sessionsData
+      const data = search
+        ? base.filter((session) => (session.title ?? '').toLowerCase().includes(search))
+        : base
+      return {
+        data,
+        isLoading: false,
+        isPlaceholderData: false,
+        fetchNextPage: vi.fn(),
+        hasNextPage: false,
+        isFetchingNextPage: false,
+        isFetchNextPageError: false,
+      }
+    },
+    useDeleteSession: () => ({
+      mutateAsync: mocks.deleteSessionMock,
+      isPending: false,
+    }),
+    useCreateSession: (directory: string, onSuccess?: (session: { id: string }) => void) => ({
+      mutate: () => {
+        mocks.createSessionDirectories.push(directory)
+        onSuccess?.({ id: 'ses_new' })
+      },
+      isPending: false,
+    }),
+  }
+})
+
+vi.mock('@/hooks/useSessionPins', () => ({
+  useSessionPins: () => ({ data: [] }),
+  useToggleSessionPin: () => ({ mutate: vi.fn() }),
+}))
+
+vi.mock('@/hooks/useSidebarRepoGroups', () => ({
+  useNavigableRepos: () => ({ repos: mocks.repos, isLoading: false, refetch: vi.fn() }),
+}))
+
+vi.mock('@/hooks/useActiveWork', () => ({
+  useActiveWork: () => ({ groups: mocks.activeWorkGroups, isLoading: false, isError: false }),
+  useActivityWindowMinutes: () => DEFAULT_ACTIVITY_WINDOW_MINUTES,
+  useProjectActivityState: () => null,
+}))
+
+vi.mock('@/hooks/useOpenCodeServers', () => ({
+  useOpenCodeServers: () => ({
+    servers: [{ id: 'srv_kitchen', name: 'Kitchen', enabled: true }],
+    isLoading: false,
+  }),
+  useOpenCodeServerStatuses: () => ({ statuses: [], statusById: {}, isLoading: false }),
+}))
+
+vi.mock('@/components/navigation/LinkedServersNav', () => ({
+  LinkedServersNav: () => <div data-testid="linked-servers-nav" />,
+}))
+
+vi.mock('@/stores/sessionStatusStore', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/stores/sessionStatusStore')>()
+  return { ...actual, useSessionStatusForSession: () => ({ type: 'idle' }) }
+})
+
+function activeWorkItem(
+  id: string,
+  directory: string,
+  server?: { id: string; name: string },
+): ActiveWorkItem {
+  const now = Date.now()
+  return {
+    key: `${server?.id ?? LOCAL_OPENCODE_SERVER_ID}:${id}`,
+    state: 'recent',
+    session: makeSession(id, `Active ${id}`, directory, now),
+    repo: server ? null : makeRepo(1, 'alpha', directory),
+    serverId: server?.id ?? null,
+    serverName: server?.name ?? null,
+    updatedAt: now,
+    path: `/repos/1/sessions/${id}`,
+  }
+}
+
+function renderSheet(
+  initialEntries: string[] = ['/repos/1?mobileTab=sessions'],
+  options: { isOpen?: boolean; cachedRepos?: Repo[] } = {},
+) {
+  const onClose = vi.fn()
+  const capturedPathname: { current: string } = { current: '' }
+  const capturedSearch: { current: string } = { current: '' }
+  const capturedNavigationType: { current: string } = { current: '' }
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  if (options.cachedRepos) queryClient.setQueryData(['repos'], options.cachedRepos)
+  render(
+    <QueryClientProvider client={queryClient}>
+      <KeyboardShortcutsProvider>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <>
+                  <SessionPickerSheet isOpen={options.isOpen ?? true} onClose={onClose} />
+                  <LocationCatcher
+                    capturedPathname={capturedPathname}
+                    capturedSearch={capturedSearch}
+                    capturedNavigationType={capturedNavigationType}
+                  />
+                </>
+              }
+            />
+          </Routes>
+        </MemoryRouter>
+      </KeyboardShortcutsProvider>
+    </QueryClientProvider>,
+  )
+  return {
+    onClose,
+    location: () =>
+      `${capturedPathname.current}${capturedSearch.current} ${capturedNavigationType.current}`,
+  }
+}
+
+describe('SessionPickerSheet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+    stubMatchMedia(true)
+    useSidebarServerStore.setState({ serverId: LOCAL_OPENCODE_SERVER_ID })
+    mocks.repos = [makeRepo(1, 'alpha', '/w/a'), makeRepo(2, 'beta', '/w/b')]
+    mocks.sessionsData = []
+    mocks.lastDirectories = []
+    mocks.lastAllDirectories = false
+    mocks.createSessionDirectories = []
+    mocks.activeWorkGroups = { needsInput: [], running: [], recent: [] }
+    mocks.listProjects.mockResolvedValue([])
+    mocks.locationData = {
+      directory: '/w/a',
+      project: { id: 'global', directory: '/w/a', canonical: '/w/a' },
+    }
+    mocks.getOpenCodeLocation.mockResolvedValue(mocks.locationData)
+    mocks.getSession.mockResolvedValue(null)
+  })
+
+  afterEach(() => {
+    Reflect.deleteProperty(window, 'matchMedia')
+  })
+
+  it('renders the picker in a bottom sheet with Activity, Sessions and Projects tabs', () => {
+    renderSheet(['/'])
+
+    expect(screen.getByRole('dialog', { name: 'Sessions' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Activity' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Sessions', selected: true })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Projects' })).toBeInTheDocument()
+    expect(screen.getByTestId('linked-servers-nav')).toBeInTheDocument()
+  })
+
+  it('navigates to the chosen session, replacing the sheet history entry', async () => {
+    mocks.sessionsData = [makeSession('ses_one', 'Solo session', '/w/a')]
+
+    const { location } = renderSheet()
+
+    const row = await screen.findByRole('option', { name: /Solo session/ })
+    fireEvent.click(row)
+
+    expect(location()).toBe('/repos/1/sessions/ses_one REPLACE')
+  })
+
+  it('closes instead of navigating when the chosen session is already open', async () => {
+    mocks.sessionsData = [makeSession('ses_one', 'Solo session', '/w/a')]
+
+    const { onClose, location } = renderSheet(['/repos/1/sessions/ses_one?mobileTab=sessions'])
+
+    const row = await screen.findByRole('option', { name: /Solo session/ })
+    fireEvent.click(row)
+
+    expect(onClose).toHaveBeenCalled()
+    expect(location()).toBe('/repos/1/sessions/ses_one?mobileTab=sessions POP')
+  })
+
+  it('creates a session in the current repo from the header action and opens it', async () => {
+    const { location } = renderSheet()
+
+    fireEvent.click(await screen.findByRole('button', { name: 'New session in alpha' }))
+
+    expect(mocks.createSessionDirectories).toEqual(['/w/a'])
+    expect(location()).toBe('/repos/1/sessions/ses_new REPLACE')
+  })
+
+  it('opens the add repository dialog from the projects tab header action', async () => {
+    const { onClose } = renderSheet()
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Projects' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Add repository' }))
+
+    expect(await screen.findByRole('dialog', { name: 'Add Repository' })).toBeInTheDocument()
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('lists and opens the linked server sessions when a linked server is selected', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.sessionsData = [makeSession('ses_remote', 'Remote session', '/home/me/app')]
+
+    const { location } = renderSheet()
+
+    const row = await screen.findByRole('option', { name: /Remote session/ })
+    expect(row).toHaveTextContent('Kitchen')
+    expect(mocks.lastDirectories).toEqual([])
+    expect(mocks.lastAllDirectories).toBe(true)
+    expect(screen.getByTestId('linked-servers-nav')).toBeInTheDocument()
+    expect(screen.queryByRole('tab', { name: 'This project' })).not.toBeInTheDocument()
+
+    fireEvent.click(row)
+
+    expect(location()).toBe('/servers/srv_kitchen/sessions/ses_remote REPLACE')
+  })
+
+  it('lists the linked server projects on the projects tab and opens one', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.listProjects.mockResolvedValue([
+      {
+        id: 'p1',
+        name: 'Alpha',
+        canonical: '/projects/alpha',
+        time: { created: 1, updated: 2 },
+        sandboxes: [],
+      },
+    ])
+
+    const { location } = renderSheet()
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Projects' }))
+    fireEvent.click(await screen.findByText('Alpha'))
+
+    expect(location()).toBe('/servers/srv_kitchen/projects?directory=%2Fprojects%2Falpha REPLACE')
+  })
+
+  it('follows the sidebar server selection to list that server', async () => {
+    mocks.sessionsData = [makeSession('ses_remote', 'Remote session', '/home/me/app')]
+
+    renderSheet()
+
+    act(() => {
+      useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    })
+
+    const row = await screen.findByRole('option', { name: /Remote session/ })
+    expect(row).toHaveTextContent('Kitchen')
+    expect(screen.queryByRole('tab', { name: 'This project' })).not.toBeInTheDocument()
+  })
+
+  it('lists activity sessions and opens one', async () => {
+    mocks.activeWorkGroups = {
+      needsInput: [],
+      running: [],
+      recent: [activeWorkItem('ses_active', '/w/a')],
+    }
+
+    const { location } = renderSheet()
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Activity' }))
+    fireEvent.click(await screen.findByRole('option', { name: /Active ses_active/ }))
+
+    expect(location()).toBe('/repos/1/sessions/ses_active REPLACE')
+  })
+
+  it('opens a remote activity row on its own server while the local server is selected', async () => {
+    mocks.activeWorkGroups = {
+      needsInput: [],
+      running: [],
+      recent: [activeWorkItem('ses_kitchen', '/home/me/app', { id: 'srv_kitchen', name: 'Kitchen' })],
+    }
+
+    const { location } = renderSheet()
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Activity' }))
+    fireEvent.click(await screen.findByRole('option', { name: /Active ses_kitchen/ }))
+
+    expect(location()).toBe('/servers/srv_kitchen/sessions/ses_kitchen REPLACE')
+  })
+
+  it('opens a remote activity row of the same session id that is open on another server', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.activeWorkGroups = {
+      needsInput: [],
+      running: [],
+      recent: [activeWorkItem('ses_shared', '/home/me/hall', { id: 'srv_hall', name: 'Hall' })],
+    }
+
+    const { onClose, location } = renderSheet([
+      '/servers/srv_kitchen/sessions/ses_shared?mobileTab=sessions',
+    ])
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Activity' }))
+    fireEvent.click(await screen.findByRole('option', { name: /Active ses_shared/ }))
+
+    expect(onClose).not.toHaveBeenCalled()
+    expect(location()).toBe('/servers/srv_hall/sessions/ses_shared REPLACE')
+  })
+
+  it('opens a local session row that shares the id of the open remote session', async () => {
+    mocks.sessionsData = [makeSession('ses_shared', 'Shared session', '/w/a')]
+
+    const { onClose, location } = renderSheet([
+      '/servers/srv_kitchen/sessions/ses_shared?mobileTab=sessions',
+    ])
+
+    fireEvent.click(await screen.findByRole('option', { name: /Shared session/ }))
+
+    expect(onClose).not.toHaveBeenCalled()
+    expect(location()).toBe('/repos/1/sessions/ses_shared REPLACE')
+  })
+
+  it('opens a session row of another linked server than the selected one', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.activeWorkGroups = {
+      needsInput: [],
+      running: [],
+      recent: [activeWorkItem('ses_hall', '/home/me/hall', { id: 'srv_hall', name: 'Hall' })],
+    }
+
+    const { location } = renderSheet()
+
+    fireEvent.mouseDown(screen.getByRole('tab', { name: 'Activity' }))
+    fireEvent.click(await screen.findByRole('option', { name: /Active ses_hall/ }))
+
+    expect(location()).toBe('/servers/srv_hall/sessions/ses_hall REPLACE')
+  })
+
+  it('keeps the assistant session flag when choosing another session of the same repo', async () => {
+    mocks.sessionsData = [makeSession('ses_b', 'Second assistant session', '/w/a')]
+
+    const { location } = renderSheet(['/repos/1/sessions/ses_a?assistant=1&mobileTab=sessions'])
+
+    fireEvent.click(await screen.findByRole('option', { name: /Second assistant session/ }))
+
+    expect(location()).toBe('/repos/1/sessions/ses_b?assistant=1 REPLACE')
+  })
+
+  it('drops the assistant session flag when choosing a session of another repo', async () => {
+    localStorage.setItem('oc:session-picker:all-projects', 'true')
+    mocks.sessionsData = [
+      makeSession('ses_a', 'Assistant session', '/w/a'),
+      makeSession('ses_b', 'Beta session', '/w/b'),
+    ]
+
+    const { location } = renderSheet(['/repos/1/sessions/ses_a?assistant=1&mobileTab=sessions'])
+
+    fireEvent.click(await screen.findByRole('option', { name: /Beta session/ }))
+
+    expect(location()).toBe('/repos/2/sessions/ses_b REPLACE')
+  })
+
+  it('scopes the sheet to the open remote session directory on a linked server session route', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.getSession.mockResolvedValue(makeSession('ses_remote', 'Remote session', '/home/me/app'))
+
+    renderSheet(['/servers/srv_kitchen/sessions/ses_remote?mobileTab=sessions'])
+
+    await waitFor(() => expect(mocks.lastDirectories).toEqual(['/home/me/app']))
+    expect(mocks.lastAllDirectories).toBe(false)
+  })
+
+  it('scopes the sheet to the canonical project directory of a remote session subdirectory', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.getSession.mockResolvedValue(makeSession('ses_remote', 'Remote session', '/home/me/app/packages/web'))
+    mocks.listProjects.mockResolvedValue([
+      {
+        id: 'p1',
+        name: 'App',
+        canonical: '/home/me/app',
+        time: { created: 1, updated: 2 },
+        sandboxes: [],
+      },
+    ])
+
+    renderSheet(['/servers/srv_kitchen/sessions/ses_remote?mobileTab=sessions'])
+
+    await waitFor(() => expect(mocks.lastDirectories).toEqual(['/home/me/app']))
+    expect(mocks.lastAllDirectories).toBe(false)
+  })
+
+  it('holds the all-directories search while the remote session directory resolves', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.getSession.mockReturnValue(new Promise(() => undefined))
+
+    renderSheet(['/servers/srv_kitchen/sessions/ses_remote?mobileTab=sessions'])
+
+    await waitFor(() => expect(mocks.getSession).toHaveBeenCalled())
+    expect(mocks.lastDirectories).toEqual([])
+    expect(mocks.lastAllDirectories).toBe(false)
+  })
+
+  it('returns to the repo session list keeping its tab when the open session is deleted', async () => {
+    mocks.sessionsData = [makeSession('ses_active', 'Active session', '/w/a')]
+    mocks.deleteSessionMock.mockResolvedValue(undefined)
+
+    const { location } = renderSheet(['/repos/1/sessions/ses_active?mobileTab=sessions&repoTab=changes'])
+
+    const combobox = await screen.findByRole('combobox')
+    await screen.findByRole('option', { name: /Active session/ })
+    fireEvent.keyDown(combobox, { key: 'd', ctrlKey: true })
+    expect(screen.getByText('Press Ctrl+D again to confirm')).toBeInTheDocument()
+    fireEvent.keyDown(combobox, { key: 'd', ctrlKey: true })
+
+    await waitFor(() => expect(mocks.deleteSessionMock).toHaveBeenCalled())
+    expect(location()).toBe('/repos/1?repoTab=changes REPLACE')
+  })
+
+  it('does not resolve the remote session directory while the sheet is closed', async () => {
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+
+    renderSheet(['/servers/srv_kitchen/sessions/ses_remote'], { isOpen: false })
+
+    await waitFor(() => expect(mocks.getSession).not.toHaveBeenCalled())
+  })
+
+  it('prefetches the project location on a repo route while the sheet is closed', async () => {
+    renderSheet(['/repos/1'], { isOpen: false, cachedRepos: mocks.repos })
+
+    await waitFor(() =>
+      expect(mocks.getOpenCodeLocation).toHaveBeenCalledWith('/w/a', LOCAL_OPENCODE_SERVER_ID),
+    )
+  })
+
+  it('does not prefetch the project location outside a repo route', async () => {
+    renderSheet(['/'], { isOpen: false, cachedRepos: mocks.repos })
+
+    await waitFor(() => expect(mocks.getOpenCodeLocation).not.toHaveBeenCalled())
+  })
+})
diff --git a/frontend/src/components/session/SessionPickerSheet.tsx b/frontend/src/components/session/SessionPickerSheet.tsx
new file mode 100644
index 000000000..7d6bc4ceb
--- /dev/null
+++ b/frontend/src/components/session/SessionPickerSheet.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { BottomSheet } from '@/components/ui/bottom-sheet'
+import { LinkedServersNav } from '@/components/navigation/LinkedServersNav'
+import { AddRepoDialog } from '@/components/repo/AddRepoDialog'
+import { SessionPickerPanel } from '@/components/session/SessionPickerDialog'
+import { useSessionPickerRouteScope } from '@/hooks/useSessionPickerRouteScope'
+import { useSessionPickerLocationPrefetch } from '@/hooks/useSessionPickerLocationPrefetch'
+import { useSessionPickerNavigation } from '@/hooks/useSessionPickerNavigation'
+
+interface SessionPickerSheetProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function SessionPickerSheet({ isOpen, onClose }: SessionPickerSheetProps) {
+  const [addRepoOpen, setAddRepoOpen] = useState(false)
+  const { currentRepo, activeSessionID, remote } = useSessionPickerRouteScope(isOpen)
+  const pickerNavigation = useSessionPickerNavigation({ mode: 'replace', onClose })
+  useSessionPickerLocationPrefetch()
+
+  const panel = isOpen ? (
+    <SessionPickerPanel
+      open={isOpen}
+      currentRepo={currentRepo}
+      activeSessionID={activeSessionID}
+      {...pickerNavigation}
+      remote={remote}
+      searchTrailing={<LinkedServersNav variant="header" />}
+      onAddRepo={() => {
+        onClose()
+        setAddRepoOpen(true)
+      }}
+    />
+  ) : null
+
+  return (
+    <>
+      <BottomSheet isOpen={isOpen} onClose={onClose} heightClass="h-[90dvh]" ariaLabel="Sessions">
+        {panel}
+      </BottomSheet>
+      <AddRepoDialog open={addRepoOpen} onOpenChange={setAddRepoOpen} />
+    </>
+  )
+}
diff --git a/frontend/src/components/source-control/BranchesTab.test.tsx b/frontend/src/components/source-control/BranchesTab.test.tsx
index d1fa416ed..971b1682e 100644
--- a/frontend/src/components/source-control/BranchesTab.test.tsx
+++ b/frontend/src/components/source-control/BranchesTab.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BranchesTab } from './BranchesTab'
@@ -39,7 +39,8 @@ vi.mock('@/components/repo/CreateWorktreeDialog', () => ({
   CreateWorktreeDialog: () => null,
 }))
 
-import { listBranches, getRepo } from '@/api/repos'
+import { listBranches, getRepo, switchBranch } from '@/api/repos'
+import { fetchGitStatus } from '@/api/git'
 
 const createWrapper = () => {
   const queryClient = new QueryClient({
@@ -89,4 +90,35 @@ describe('BranchesTab', () => {
 
     expect(await screen.findByText('origin/feature')).toBeInTheDocument()
   })
+
+  it('invalidates the vcs info of the switched repository', async () => {
+    vi.mocked(switchBranch).mockResolvedValue({
+      id: 1,
+      fullPath: '/abs/repos/my-repo',
+      currentBranch: 'feature',
+    } as never)
+    vi.mocked(fetchGitStatus).mockResolvedValue({
+      branch: 'feature',
+      ahead: 0,
+      behind: 0,
+      files: [],
+      hasChanges: false,
+      operation: null,
+    })
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    })
+    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
+    const user = userEvent.setup()
+    render(<BranchesTab repoId={1} currentBranch="main" />, {
+      wrapper: ({ children }) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>,
+    })
+
+    await user.click(await screen.findByRole('button', { name: /^feature/ }))
+
+    await waitFor(() => expect(invalidateSpy).toHaveBeenCalledWith({
+      queryKey: ['opencode', 'vcs', '/abs/repos/my-repo', 'info'],
+      exact: true,
+    }))
+  })
 })
diff --git a/frontend/src/components/source-control/BranchesTab.tsx b/frontend/src/components/source-control/BranchesTab.tsx
index 1a1853577..73370345d 100644
--- a/frontend/src/components/source-control/BranchesTab.tsx
+++ b/frontend/src/components/source-control/BranchesTab.tsx
@@ -14,7 +14,7 @@ import { useGit } from '@/hooks/useGit'
 import { GIT_UI_COLORS } from '@/lib/git-status-styles'
 import { CreateWorktreeDialog } from '@/components/repo/CreateWorktreeDialog'
 import { IntegrateBranchDialog } from '@/components/source-control/IntegrateBranchDialog'
-import { invalidateRepoGitCaches, setRepoGitStatusCaches } from '@/lib/queryInvalidation'
+import { invalidateRepoGitCaches, invalidateVcsInfoCache, setRepoGitStatusCaches } from '@/lib/queryInvalidation'
 
 interface BranchesTabProps {
   repoId: number
@@ -72,6 +72,7 @@ export function BranchesTab({ repoId, currentBranch }: BranchesTabProps) {
       queryClient.setQueryData(['repo', repoId], updatedRepo)
       setRepoGitStatusCaches(queryClient, repoId, status)
       invalidateRepoGitCaches(queryClient, repoId, { invalidateStatus: false })
+      invalidateVcsInfoCache(queryClient, updatedRepo.fullPath)
       refetch()
       showToast.success(`Switched to branch: ${updatedRepo.currentBranch}`)
     },
diff --git a/frontend/src/components/source-control/RemoteSourceControlContent.tsx b/frontend/src/components/source-control/RemoteSourceControlContent.tsx
index 645fa10c4..a577c2431 100644
--- a/frontend/src/components/source-control/RemoteSourceControlContent.tsx
+++ b/frontend/src/components/source-control/RemoteSourceControlContent.tsx
@@ -3,7 +3,6 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { ArrowLeft, FileText, GitBranch, Loader2, RefreshCw } from 'lucide-react'
 import {
   getVcsDiff,
-  getVcsInfo,
   listVcsStatus,
   type VcsFileDiff,
   type VcsFileStatus,
@@ -16,6 +15,7 @@ import { cn } from '@/lib/utils'
 import { serverScopedKey } from '@/lib/serverScope'
 import { useRefreshOnOpen } from '@/hooks/useRefreshOnOpen'
 import { useMobile } from '@/hooks/useMobile'
+import { useVcsInfo } from '@/hooks/useVcsInfo'
 import { GIT_UI_COLORS } from '@/lib/git-status-styles'
 import type { GitFileStatus } from '@/types/git'
 
@@ -60,11 +60,7 @@ export function RemoteSourceControlContent({
     [directory, serverId],
   )
 
-  const infoQuery = useQuery({
-    queryKey: [...vcsKey, 'info'],
-    queryFn: () => getVcsInfo(directory, serverId),
-    retry: false,
-  })
+  const infoQuery = useVcsInfo(directory, serverId)
 
   const statusQuery = useQuery({
     queryKey: [...vcsKey, 'status'],
diff --git a/frontend/src/components/ui/bottom-sheet.test.tsx b/frontend/src/components/ui/bottom-sheet.test.tsx
index 77e94f03e..307743b24 100644
--- a/frontend/src/components/ui/bottom-sheet.test.tsx
+++ b/frontend/src/components/ui/bottom-sheet.test.tsx
@@ -1,8 +1,15 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { stubMatchMedia } from '@/test/test-utils'
 import { BottomSheet, BottomSheetHeader, BottomSheetContent } from './bottom-sheet'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { useSwipeDismiss } from '@/hooks/useMobile'
 
 vi.mock('@/hooks/useMobile', () => ({
@@ -36,6 +43,34 @@ function AutoFocusSheetHost() {
   )
 }
 
+function OpenSheetHost({ onClose }: { onClose: () => void }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>open sheet</button>
+      <BottomSheet isOpen={open} onClose={() => { onClose(); setOpen(false) }} ariaLabel="Test sheet">
+        <button type="button">first</button>
+        <button type="button">last</button>
+      </BottomSheet>
+    </>
+  )
+}
+
+function SheetWithMenu({ onClose }: { onClose: () => void }) {
+  return (
+    <BottomSheet isOpen onClose={onClose} ariaLabel="Test sheet">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button type="button">row actions</button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Delete session</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </BottomSheet>
+  )
+}
+
 afterEach(() => {
   Reflect.deleteProperty(window, 'matchMedia')
 })
@@ -43,6 +78,11 @@ afterEach(() => {
 describe('BottomSheet', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    vi.mocked(useSwipeDismiss).mockReturnValue({
+      bind: vi.fn(),
+      swipeProgress: 0,
+      swipeStyles: {},
+    })
   })
 
   it('renders when isOpen is true', () => {
@@ -55,17 +95,56 @@ describe('BottomSheet', () => {
   })
 
   it('does not render when isOpen is false', async () => {
-    const { container } = render(
+    render(
       <BottomSheet isOpen={false} onClose={() => {}} ariaLabel="Test sheet">
         <div>Test content</div>
       </BottomSheet>,
     )
     await waitFor(() => {
-      expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     })
   })
 
-  it('calls onClose when backdrop is clicked', () => {
+  it('exposes the sheet as a labelled modal dialog', () => {
+    render(
+      <BottomSheet isOpen onClose={() => {}} ariaLabel="Test sheet">
+        <div>Test content</div>
+      </BottomSheet>,
+    )
+
+    const dialog = screen.getByRole('dialog', { name: 'Test sheet' })
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog).toHaveAttribute('data-state', 'open')
+  })
+
+  it('moves focus into the sheet panel on open', () => {
+    render(
+      <BottomSheet isOpen onClose={() => {}} ariaLabel="Test sheet">
+        <button type="button">inside</button>
+      </BottomSheet>,
+    )
+
+    expect(screen.getByRole('dialog', { name: 'Test sheet' })).toHaveFocus()
+  })
+
+  it('keeps tab focus inside the sheet', () => {
+    render(
+      <BottomSheet isOpen onClose={() => {}} ariaLabel="Test sheet">
+        <button type="button">first</button>
+        <button type="button">last</button>
+      </BottomSheet>,
+    )
+
+    const first = screen.getByRole('button', { name: 'first' })
+    const last = screen.getByRole('button', { name: 'last' })
+    last.focus()
+
+    fireEvent.keyDown(last, { key: 'Tab' })
+
+    expect(first).toHaveFocus()
+  })
+
+  it('calls onClose when the backdrop is clicked', async () => {
     const handleClose = vi.fn()
     render(
       <BottomSheet isOpen onClose={handleClose} ariaLabel="Test sheet">
@@ -73,10 +152,12 @@ describe('BottomSheet', () => {
       </BottomSheet>,
     )
     const backdrop = document.querySelector('.bg-black\\/40')
-    if (backdrop) {
-      fireEvent.click(backdrop)
-    }
-    expect(handleClose).toHaveBeenCalled()
+    if (!backdrop) throw new Error('Missing sheet backdrop')
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    fireEvent.pointerDown(backdrop)
+
+    await waitFor(() => expect(handleClose).toHaveBeenCalledTimes(1))
   })
 
   it('calls onClose when Escape key is pressed', () => {
@@ -87,7 +168,26 @@ describe('BottomSheet', () => {
       </BottomSheet>,
     )
     fireEvent.keyDown(document, { key: 'Escape' })
-    expect(handleClose).toHaveBeenCalled()
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('closes only the nested menu when Escape is pressed inside it', async () => {
+    const user = userEvent.setup()
+    const handleClose = vi.fn()
+    render(<SheetWithMenu onClose={handleClose} />)
+
+    await user.click(screen.getByRole('button', { name: 'row actions' }))
+    expect(await screen.findByRole('menu')).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+    expect(handleClose).not.toHaveBeenCalled()
+    expect(screen.getByRole('dialog', { name: 'Test sheet' })).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+
+    expect(handleClose).toHaveBeenCalledTimes(1)
   })
 
   it('applies pb-safe class', () => {
@@ -96,7 +196,7 @@ describe('BottomSheet', () => {
         <div>Test content</div>
       </BottomSheet>,
     )
-    const dialog = document.querySelector('[role="dialog"]')
+    const dialog = screen.getByRole('dialog', { name: 'Test sheet' })
     expect(dialog).toBeInTheDocument()
   })
 
@@ -118,7 +218,7 @@ describe('BottomSheet', () => {
         <div>Test content</div>
       </BottomSheet>,
     )
-    const dialog = document.querySelector('[role="dialog"]')
+    const dialog = screen.getByRole('dialog', { name: 'Test sheet' })
     expect(dialog).toHaveClass('h-[50dvh]')
   })
 
@@ -142,6 +242,19 @@ describe('BottomSheet', () => {
     })
   })
 
+  it('disables the swipe gesture when the sheet is not dismissible', () => {
+    render(
+      <BottomSheet isOpen dismissible={false} onClose={() => {}} ariaLabel="Test sheet">
+        <div>Test content</div>
+      </BottomSheet>,
+    )
+
+    expect(useSwipeDismiss).toHaveBeenCalledWith(expect.any(Function), {
+      enabled: false,
+      threshold: 60,
+    })
+  })
+
   it('binds gesture to the panel element with aria-modal', () => {
     const mockBind = vi.fn()
     vi.mocked(useSwipeDismiss).mockReturnValue({
@@ -159,10 +272,10 @@ describe('BottomSheet', () => {
     const panelElement = document.querySelector('[aria-modal="true"]')
     expect(panelElement).toBeInTheDocument()
 
-    expect(mockBind).toHaveBeenCalled()
+    expect(mockBind).toHaveBeenCalledWith(panelElement)
   })
 
-  it('moves focus to the chat prompt on desktop when it closes', () => {
+  it('moves focus to the chat prompt on desktop when it closes', async () => {
     stubMatchMedia(true)
     const { rerender } = renderSheet(false)
 
@@ -185,10 +298,10 @@ describe('BottomSheet', () => {
       </>,
     )
 
-    expect(screen.getByLabelText('prompt')).toHaveFocus()
+    await waitFor(() => expect(screen.getByLabelText('prompt')).toHaveFocus())
   })
 
-  it('does not refocus the chat prompt on touch when it closes', () => {
+  it('does not refocus the chat prompt on touch when it closes', async () => {
     stubMatchMedia(false)
     const { rerender } = renderSheet(false)
 
@@ -211,6 +324,7 @@ describe('BottomSheet', () => {
       </>,
     )
 
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
     expect(screen.getByLabelText('prompt')).not.toHaveFocus()
   })
 
@@ -228,7 +342,7 @@ describe('BottomSheet', () => {
     await waitFor(() => expect(opener).toHaveFocus())
   })
 
-  it('captures the opener when mounted already open and restores it on close', () => {
+  it('captures the opener when mounted already open and restores it on close', async () => {
     stubMatchMedia(true)
     const { rerender } = render(
       <button type="button">opener</button>,
@@ -254,7 +368,22 @@ describe('BottomSheet', () => {
       </>,
     )
 
-    expect(opener).toHaveFocus()
+    await waitFor(() => expect(opener).toHaveFocus())
+  })
+
+  it('returns focus to the opener after the sheet closes through the keyboard', async () => {
+    const user = userEvent.setup()
+    const handleClose = vi.fn()
+    render(<OpenSheetHost onClose={handleClose} />)
+
+    const opener = screen.getByRole('button', { name: 'open sheet' })
+    await user.click(opener)
+    await waitFor(() => expect(screen.getByRole('dialog', { name: 'Test sheet' })).toHaveFocus())
+
+    await user.keyboard('{Escape}')
+
+    expect(handleClose).toHaveBeenCalledTimes(1)
+    await waitFor(() => expect(opener).toHaveFocus())
   })
 })
 
diff --git a/frontend/src/components/ui/bottom-sheet.tsx b/frontend/src/components/ui/bottom-sheet.tsx
index 14b7fa6fc..c37007fb5 100644
--- a/frontend/src/components/ui/bottom-sheet.tsx
+++ b/frontend/src/components/ui/bottom-sheet.tsx
@@ -1,9 +1,15 @@
-import { useEffect, useState, useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Content as DialogContent,
+  Overlay as DialogOverlay,
+  Portal as DialogPortal,
+  Root as DialogRoot,
+  Title as DialogTitle,
+} from '@radix-ui/react-dialog'
 import { cn } from '@/lib/utils'
 import { MODAL_TRANSITION_MS } from '@/lib/utils'
 import { useSwipeDismiss } from '@/hooks/useMobile'
-import { useRestoreFocusOnClose } from '@/hooks/useRestoreFocusOnClose'
+import { useOverlayReturnFocus } from '@/hooks/useOverlayReturnFocus'
 
 export interface BottomSheetProps {
   isOpen: boolean
@@ -12,6 +18,7 @@ export interface BottomSheetProps {
   className?: string
   children: React.ReactNode
   ariaLabel?: string
+  dismissible?: boolean
 }
 
 export function BottomSheet({
@@ -21,20 +28,25 @@ export function BottomSheet({
   className,
   children,
   ariaLabel,
+  dismissible = true,
 }: BottomSheetProps) {
   const [shouldRender, setShouldRender] = useState(false)
+  const { handleCloseAutoFocus } = useOverlayReturnFocus(isOpen)
   const panelRef = useRef<HTMLDivElement>(null)
-
-  useRestoreFocusOnClose(isOpen, panelRef)
+  const [panelElement, setPanelElement] = useState<HTMLDivElement | null>(null)
+  const setPanelRef = useCallback((node: HTMLDivElement | null) => {
+    panelRef.current = node
+    setPanelElement(node)
+  }, [])
 
   const { bind, swipeStyles } = useSwipeDismiss(onClose, {
-    enabled: isOpen,
+    enabled: isOpen && dismissible,
     threshold: 60,
   })
 
   useEffect(() => {
-    return bind(panelRef.current)
-  }, [bind])
+    return bind(panelElement)
+  }, [bind, panelElement])
 
   useEffect(() => {
     if (isOpen) {
@@ -45,64 +57,59 @@ export function BottomSheet({
     }
   }, [isOpen])
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose()
-      }
-    }
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) onClose()
+  }
 
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape)
-      document.body.style.overflow = 'hidden'
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape)
-      document.body.style.overflow = 'unset'
-    }
-  }, [isOpen, onClose])
+  const handleOpenAutoFocus = (event: Event) => {
+    event.preventDefault()
+    panelRef.current?.focus({ preventScroll: true })
+  }
 
   if (!isOpen && !shouldRender) return null
 
   const sheet = (
-    <div
-      className="fixed inset-0 z-[250]"
-      style={{
-        opacity: isOpen ? 1 : 0,
-        pointerEvents: isOpen ? 'auto' : 'none',
-        transition: `opacity ${MODAL_TRANSITION_MS}ms ease-out`,
-      }}
-    >
-      <div
-        className="absolute inset-0 bg-black/40 backdrop-blur-sm"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      <div
-        ref={panelRef}
-        className={cn(
-          'fixed inset-x-0 bottom-0 flex flex-col bg-background rounded-t-2xl border-t border-border',
-          heightClass,
-          className,
-        )}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel}
-        data-state={isOpen ? 'open' : 'closed'}
-        style={swipeStyles}
-      >
-        <div className="w-full flex justify-center pt-3 pb-2">
-          <div className="w-9 h-1 rounded-full bg-muted-foreground/30" />
+    <DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogPortal forceMount>
+        <div
+          className="fixed inset-0 z-[250]"
+          style={{
+            opacity: isOpen ? 1 : 0,
+            pointerEvents: isOpen ? 'auto' : 'none',
+            transition: `opacity ${MODAL_TRANSITION_MS}ms ease-out`,
+          }}
+        >
+          <DialogOverlay
+            forceMount
+            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+          />
+          <DialogContent
+            ref={setPanelRef}
+            forceMount
+            aria-modal="true"
+            aria-describedby={undefined}
+            tabIndex={-1}
+            onOpenAutoFocus={handleOpenAutoFocus}
+            onCloseAutoFocus={handleCloseAutoFocus}
+            className={cn(
+              'fixed inset-x-0 bottom-0 flex flex-col bg-background rounded-t-2xl border-t border-border focus:outline-none',
+              heightClass,
+              className,
+            )}
+            style={swipeStyles}
+          >
+            <DialogTitle className="sr-only">{ariaLabel}</DialogTitle>
+            <div className="w-full flex justify-center pt-3 pb-2">
+              <div className="w-9 h-1 rounded-full bg-muted-foreground/30" />
+            </div>
+            {children}
+          </DialogContent>
         </div>
-        {children}
-      </div>
-    </div>
+      </DialogPortal>
+    </DialogRoot>
   )
 
-  if (typeof document === 'undefined') return sheet
-
-  return createPortal(sheet, document.body)
+  return sheet
 }
 
 export interface BottomSheetHeaderProps {
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 84171f7bf..d93231316 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -5,25 +5,19 @@ import { X } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useSwipeBack } from '@/hooks/useMobile'
 import { useVisualViewport } from '@/hooks/useVisualViewport'
-import { getFocusedElement, restoreOverlayFocus } from '@/lib/overlayFocus'
+import { useOverlayReturnFocus } from '@/hooks/useOverlayReturnFocus'
 
 const DialogOpenContext = React.createContext<boolean>(true)
-const DialogReturnFocusContext = React.createContext<HTMLElement | null>(null)
+const DialogCloseAutoFocusContext = React.createContext<((event: Event) => void) | null>(null)
 
 function Dialog({ open, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  const [openState, setOpenState] = React.useState(() => ({
-    open,
-    returnFocus: open ? getFocusedElement() : null,
-  }))
-  if (openState.open !== open) {
-    setOpenState({ open, returnFocus: open ? getFocusedElement() : openState.returnFocus })
-  }
+  const { handleCloseAutoFocus } = useOverlayReturnFocus(open)
 
   return (
     <DialogOpenContext.Provider value={open ?? true}>
-      <DialogReturnFocusContext.Provider value={openState.returnFocus}>
+      <DialogCloseAutoFocusContext.Provider value={handleCloseAutoFocus}>
         <DialogPrimitive.Root open={open} {...props} />
-      </DialogReturnFocusContext.Provider>
+      </DialogCloseAutoFocusContext.Provider>
     </DialogOpenContext.Provider>
   )
 }
@@ -68,13 +62,11 @@ const DialogContent = React.forwardRef<
 >(({ className, children, hideCloseButton, fullscreen, mobileFullscreen, mobileSwipeToClose, keyboardAware, canSwipeBack, onSwipeBack, overlayClassName, style, onCloseAutoFocus, onEscapeKeyDown, ...props }, ref) => {
   const isMobileFullscreenMode = fullscreen || mobileFullscreen
   const isDialogOpen = React.useContext(DialogOpenContext)
-  const returnFocus = React.useContext(DialogReturnFocusContext)
+  const restoreFocusOnClose = React.useContext(DialogCloseAutoFocusContext)
   const handleCloseAutoFocus = (event: Event) => {
     onCloseAutoFocus?.(event)
     if (event.defaultPrevented) return
-    if (restoreOverlayFocus(returnFocus, event.currentTarget as Element | null)) {
-      event.preventDefault()
-    }
+    restoreFocusOnClose?.(event)
   }
   const handleEscapeKeyDown = (event: KeyboardEvent) => {
     onEscapeKeyDown?.(event)
diff --git a/frontend/src/components/ui/header.tsx b/frontend/src/components/ui/header.tsx
index eb93795fd..a66665708 100644
--- a/frontend/src/components/ui/header.tsx
+++ b/frontend/src/components/ui/header.tsx
@@ -4,12 +4,8 @@ import { BackButton } from "@/components/ui/back-button";
 import { PageHeader } from "@/components/ui/page-header";
 import { useSettingsDialog } from "@/hooks/useSettingsDialog";
 import { useTheme } from "@/hooks/useTheme";
-import { EditSessionTitleDialog } from "@/components/session/EditSessionTitleDialog";
 import { cn } from "@/lib/utils";
 import type { ReactNode } from "react";
-import { useState, useEffect } from "react";
-import { useMobile } from "@/hooks/useMobile";
-import { X } from "lucide-react";
 
 interface HeaderProps {
   children: ReactNode;
@@ -56,107 +52,6 @@ function HeaderTitle({ children, logo, className }: HeaderTitleProps) {
   );
 }
 
-interface HeaderEditableTitleProps {
-  value: string;
-  onChange: (value: string) => void;
-  subtitle?: React.ReactNode;
-  className?: string;
-}
-
-function HeaderEditableTitle({ value, onChange, subtitle, className }: HeaderEditableTitleProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editTitle, setEditTitle] = useState(value);
-  const isMobile = useMobile();
-
-  useEffect(() => {
-    if (!isEditing) {
-      setEditTitle(value);
-    }
-  }, [value, isEditing]);
-
-  const handleTitleClick = () => {
-    setIsEditing(true);
-    setEditTitle(value);
-  };
-
-  const handleTitleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editTitle.trim() && editTitle !== value) {
-      onChange(editTitle.trim());
-    }
-    setIsEditing(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setEditTitle(value);
-      setIsEditing(false);
-    } else if (e.key === 'Enter') {
-      handleTitleSubmit(e);
-    }
-  };
-
-  const handleSave = (newTitle: string) => {
-    if (newTitle.trim() && newTitle !== value) {
-      onChange(newTitle.trim());
-    }
-    setIsEditing(false);
-  };
-
-  return (
-    <div className={cn("min-w-0 flex-1", className)}>
-      {isMobile && (
-        <EditSessionTitleDialog
-          isOpen={isEditing}
-          currentTitle={value}
-          onClose={() => setIsEditing(false)}
-          onSave={handleSave}
-        />
-      )}
-      {isEditing && !isMobile ? (
-        <form onSubmit={handleTitleSubmit} className="flex items-center gap-1 min-w-0">
-          <input
-            type="text"
-            value={editTitle}
-            onChange={(e) => setEditTitle(e.target.value)}
-            onBlur={(e) => {
-              if (!e.relatedTarget?.closest('button')) {
-                handleTitleSubmit(e);
-              }
-            }}
-            onKeyDown={handleKeyDown}
-            className="text-[16px] sm:text-base font-semibold bg-background border border-border rounded-l px-2 py-1 outline-none w-full truncate focus:border-primary sm:max-w-[250px] h-7"
-            autoFocus
-          />
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 rounded-l-none border border-l-0 border-border hover:bg-accent flex-shrink-0 mt-0"
-            onClick={() => setEditTitle("")}
-          >
-            <X className="w-3.5 h-3.5" />
-          </Button>
-        </form>
-      ) : (
-        <div className="min-w-0">
-          <h1 
-            className="text-xs sm:text-base font-semibold bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent truncate cursor-pointer hover:opacity-80 transition-opacity"
-            onClick={handleTitleClick}
-          >
-            {value}
-          </h1>
-          {subtitle && (
-            <p className="text-[10px] sm:text-xs text-muted-foreground truncate">
-              {typeof subtitle === 'string' ? subtitle : subtitle}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
 function HeaderActions({ children, className }: { children: ReactNode; className?: string }) {
   return <div className={cn("flex items-center gap-2", className)}>{children}</div>;
 }
@@ -180,13 +75,11 @@ function HeaderSettingsButton() {
 export const Header = Object.assign(HeaderBase, {
   BackButton: HeaderBackButton,
   Title: HeaderTitle,
-  EditableTitle: HeaderEditableTitle,
   Actions: HeaderActions,
   Settings: HeaderSettingsButton,
 }) as typeof HeaderBase & {
   BackButton: typeof HeaderBackButton;
   Title: typeof HeaderTitle;
-  EditableTitle: typeof HeaderEditableTitle;
   Actions: typeof HeaderActions;
   Settings: typeof HeaderSettingsButton;
 };
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
index 8000f7e24..88c9ef7ff 100644
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -4,10 +4,14 @@ import { cn } from "@/lib/utils"
 interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
   value?: number
   max?: number
+  /** Extra classes merged onto the filled indicator. */
+  indicatorClassName?: string
+  /** Optional test id applied to the filled indicator. */
+  indicatorTestId?: string
 }
 
 const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
-  ({ className, value = 0, max = 100, ...props }, ref) => {
+  ({ className, value = 0, max = 100, indicatorClassName, indicatorTestId, ...props }, ref) => {
     const percentage = Math.min(100, Math.max(0, (value / max) * 100))
 
     return (
@@ -24,7 +28,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         {...props}
       >
         <div
-          className="h-full bg-primary transition-all duration-300 ease-in-out"
+          data-testid={indicatorTestId}
+          className={cn(
+            "h-full bg-primary transition-all duration-300 ease-in-out",
+            indicatorClassName
+          )}
           style={{ width: `${percentage}%` }}
         />
       </div>
diff --git a/frontend/src/contexts/EventContext.test.tsx b/frontend/src/contexts/EventContext.test.tsx
index d6a331c6b..8d1294b17 100644
--- a/frontend/src/contexts/EventContext.test.tsx
+++ b/frontend/src/contexts/EventContext.test.tsx
@@ -2946,17 +2946,28 @@ describe('EventProvider permissions and forms', () => {
 
     await waitFor(() => expect(mocks.subscribeGlobalMonitor).toHaveBeenCalled())
 
+    const lastSubscribeCall = mocks.subscribeGlobalMonitor.mock.calls[mocks.subscribeGlobalMonitor.mock.calls.length - 1]
+    const onEvent = lastSubscribeCall[0].onEvent as (data: unknown) => void
+    const onResync = lastSubscribeCall[0].onResync as
+      | ((directories: string[], serverId?: string) => void)
+      | undefined
+
+    mocks.listActiveSessions.mockImplementation((serverId?: string) =>
+      Promise.resolve(serverId === 'srv_remote' ? { 'remote-session': { type: 'running' } } : {}),
+    )
+    act(() => {
+      onEvent({ type: 'session.status', data: { sessionID: 'remote-session', status: { type: 'busy' } }, directory: '/remote/repo', serverId: 'srv_remote' })
+    })
+    await act(async () => {
+      await Promise.resolve()
+    })
+
     mocks.listActiveSessions.mockClear()
     mocks.listPendingPermissions.mockClear()
     mocks.listPendingForms.mockClear()
     mocks.listShells.mockClear()
     invalidateQueries.mockClear()
 
-    const lastSubscribeCall = mocks.subscribeGlobalMonitor.mock.calls[mocks.subscribeGlobalMonitor.mock.calls.length - 1]
-    const onResync = lastSubscribeCall[0].onResync as
-      | ((directories: string[], serverId?: string) => void)
-      | undefined
-
     await act(async () => {
       onResync?.(['/repo', 'srv_remote|/remote/repo'], 'srv_remote')
     })
@@ -2978,6 +2989,93 @@ describe('EventProvider permissions and forms', () => {
     expect(invalidateQueries).not.toHaveBeenCalledWith({ queryKey: ['opencode', 'commands'] })
   })
 
+  it('reconciles only linked directories with active work on a remote resync', async () => {
+    mocks.servers = [{ id: 'srv_remote', enabled: true }]
+    mocks.listProjects.mockResolvedValue([
+      { id: 'proj-busy', canonical: '/remote/busy' },
+      { id: 'proj-idle', canonical: '/remote/idle' },
+      { id: 'proj-other', canonical: '/remote/other' },
+    ])
+    mocks.listActiveSessions.mockImplementation((serverId?: string) =>
+      Promise.resolve(serverId === 'srv_remote' ? { 'remote-busy': { type: 'running' } } : {}),
+    )
+
+    render(<Harness />, { wrapper: createWrapper() })
+
+    await waitFor(() => expect(mocks.listProjects).toHaveBeenCalledWith('srv_remote'))
+    await waitFor(() => expect(mocks.subscribeGlobalMonitor).toHaveBeenCalled())
+
+    const lastSubscribeCall = mocks.subscribeGlobalMonitor.mock.calls[mocks.subscribeGlobalMonitor.mock.calls.length - 1]
+    const onEvent = lastSubscribeCall[0].onEvent as (data: unknown) => void
+    const onResync = lastSubscribeCall[0].onResync as
+      | ((directories: string[], serverId?: string) => void)
+      | undefined
+
+    act(() => {
+      onEvent({ type: 'session.status', data: { sessionID: 'remote-busy', status: { type: 'busy' } }, directory: '/remote/busy', serverId: 'srv_remote' })
+    })
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    mocks.listPendingPermissions.mockClear()
+    mocks.listPendingForms.mockClear()
+    mocks.listShells.mockClear()
+
+    await act(async () => {
+      onResync?.(
+        ['srv_remote|/remote/busy', 'srv_remote|/remote/idle', 'srv_remote|/remote/other'],
+        'srv_remote',
+      )
+    })
+
+    await waitFor(() => {
+      expect(mocks.listPendingPermissions).toHaveBeenCalledWith('/remote/busy', 'srv_remote')
+      expect(mocks.listPendingForms).toHaveBeenCalledWith('/remote/busy', 'srv_remote')
+      expect(mocks.listShells).toHaveBeenCalledWith('/remote/busy', 'srv_remote')
+    })
+    expect(mocks.listPendingPermissions).not.toHaveBeenCalledWith('/remote/idle', 'srv_remote')
+    expect(mocks.listPendingPermissions).not.toHaveBeenCalledWith('/remote/other', 'srv_remote')
+    expect(mocks.listShells).not.toHaveBeenCalledWith('/remote/idle', 'srv_remote')
+  })
+
+  it('reconciles the viewed linked directory even when its session is idle', async () => {
+    mocks.servers = [{ id: 'srv_remote', enabled: true }]
+    mocks.listActiveSessions.mockResolvedValue({})
+
+    render(<Harness />, {
+      wrapper: createWrapper(createTestQueryClient(), '/servers/srv_remote/sessions/remote-viewed'),
+    })
+
+    await waitFor(() => expect(mocks.subscribeGlobalMonitor).toHaveBeenCalled())
+
+    const lastSubscribeCall = mocks.subscribeGlobalMonitor.mock.calls[mocks.subscribeGlobalMonitor.mock.calls.length - 1]
+    const onEvent = lastSubscribeCall[0].onEvent as (data: unknown) => void
+    const onResync = lastSubscribeCall[0].onResync as
+      | ((directories: string[], serverId?: string) => void)
+      | undefined
+
+    act(() => {
+      onEvent({ type: 'session.status', data: { sessionID: 'remote-viewed', status: { type: 'idle' } }, directory: '/remote/viewed', serverId: 'srv_remote' })
+    })
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    mocks.listPendingPermissions.mockClear()
+    mocks.listShells.mockClear()
+
+    await act(async () => {
+      onResync?.(['srv_remote|/remote/viewed', 'srv_remote|/remote/idle'], 'srv_remote')
+    })
+
+    await waitFor(() => {
+      expect(mocks.listPendingPermissions).toHaveBeenCalledWith('/remote/viewed', 'srv_remote')
+      expect(mocks.listShells).toHaveBeenCalledWith('/remote/viewed', 'srv_remote')
+    })
+    expect(mocks.listPendingPermissions).not.toHaveBeenCalledWith('/remote/idle', 'srv_remote')
+  })
+
   it('clears a stale remote busy status on a remote resync', async () => {
     mocks.listRepos.mockResolvedValue([{ id: 123, fullPath: '/repo' }])
     mocks.listActiveSessions.mockResolvedValue({})
@@ -3201,6 +3299,7 @@ describe('EventProvider permissions and forms', () => {
 
     act(() => {
       useSessionStatus.getState().setSessionDirectory('remote-session', 'srv_remote|/remote/repo')
+      useSessionStatus.getState().setStatus('remote-session', { type: 'busy' })
     })
 
     mocks.servers = [{ id: 'srv_remote', enabled: true }]
diff --git a/frontend/src/contexts/EventContext.tsx b/frontend/src/contexts/EventContext.tsx
index 1a3be4772..9e38d4b08 100644
--- a/frontend/src/contexts/EventContext.tsx
+++ b/frontend/src/contexts/EventContext.tsx
@@ -8,7 +8,6 @@ import {
   listActiveSessions,
   listPendingForms,
   listPendingPermissions,
-  listProjects,
   listShells,
   replyForm,
   replyPermission,
@@ -19,12 +18,13 @@ import { buildServerDirectoryKey, LOCAL_OPENCODE_SERVER_ID, parseServerDirectory
 import { isLocalOpenCodeServer } from '@/contexts/OpenCodeServerContext'
 import { useAuth } from '@/hooks/useAuth'
 import { useOpenCodeServers } from '@/hooks/useOpenCodeServers'
+import { remoteProjectsQueryOptions } from '@/hooks/useRemoteProjects'
 import type { FormAnswer, FormInfo, PermissionRequest, V2Event } from '@opencode-manager/shared/opencode'
 import type { PermissionResponse, SSHHostKeyRequest, Repo } from '@/api/types'
 import { showToast } from '@/lib/toast'
 import { openCodeEventStream, type EventStreamHealthState } from '@/lib/opencode-event-stream'
 import { addToSessionKeyedState, removeFromSessionKeyedState } from '@/lib/sessionKeyedState'
-import { getServerSessionPath, getSessionPath, parseRepoRoute, parseServerSessionRoute } from '@/lib/navigation'
+import { getServerSessionPath, getSessionPath, parseRepoRoute, parseServerProjectRoute, parseServerSessionRoute } from '@/lib/navigation'
 import { serverScopedKey } from '@/lib/serverScope'
 import { repoMatchesDirectory } from '@/components/navigation/sidebar-session-tree'
 import { changeWalkthroughQueryKey } from '@/hooks/useChangeWalkthrough'
@@ -374,6 +374,8 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   const reposRef = useRef<typeof repos>(null)
   const ancestryInFlightRef = useRef<Set<string>>(new Set())
   const forgottenSessionIDsRef = useRef(new Set<string>())
+  const reconciledActiveDirectoriesRef = useRef(new Set<string>())
+  const viewedRouteRef = useRef({ pathname: location.pathname, search: location.search })
 
   const { isAuthenticated } = useAuth()
   const { data: repos } = useQuery({
@@ -399,10 +401,8 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [])
   const remoteProjectQueries = useQueries({
     queries: enabledRemoteServers.map((server) => ({
-      queryKey: serverScopedKey(['opencode', 'projects'], server.id),
-      queryFn: () => listProjects(server.id),
+      ...remoteProjectsQueryOptions(server.id),
       enabled: isAuthenticated,
-      retry: false,
     })),
   })
   const remoteProjectDirectoriesKey = useMemo(() => {
@@ -436,6 +436,10 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
     formsBySessionRef.current = formsBySession
   }, [formsBySession])
 
+  useEffect(() => {
+    viewedRouteRef.current = { pathname: location.pathname, search: location.search }
+  }, [location.pathname, location.search])
+
   const viewedSessionId = useMemo(
     () => parseServerSessionRoute(location.pathname)?.sessionId ?? parseRepoRoute(location.pathname).sessionId,
     [location.pathname],
@@ -701,8 +705,52 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
     navigateToSession(currentPermission.sessionID, currentPermission.serverId)
   }, [currentPermission, navigateToSession])
 
-  const reconcilePendingActionsForDirectories = useCallback(async (directories: string[]) => {
-    await Promise.all(directories.map(async (key) => {
+  const resolveViewedRemoteDirectoryKey = useCallback((): string | null => {
+    const { pathname, search } = viewedRouteRef.current
+    const projectRoute = parseServerProjectRoute(pathname, search)
+    if (projectRoute) return buildServerDirectoryKey(projectRoute.serverId, projectRoute.directory)
+    const sessionRoute = parseServerSessionRoute(pathname)
+    if (!sessionRoute) return null
+    const remembered = useSessionStatus.getState().directories.get(sessionRoute.sessionId)
+    if (remembered) return remembered
+    const cached = findCachedSessionDirectory(sessionRoute.sessionId)
+    return cached ? buildServerDirectoryKey(sessionRoute.serverId, cached) : null
+  }, [findCachedSessionDirectory])
+
+  const collectActiveRemoteDirectoryKeys = useCallback((): Set<string> => {
+    const state = useSessionStatus.getState()
+    const keys = new Set<string>()
+    const addKey = (key: string | null | undefined) => {
+      if (!key) return
+      if (isLocalOpenCodeServer(parseServerDirectoryKey(key).serverId)) return
+      keys.add(key)
+    }
+    for (const key of selectActiveSessionDirectoriesKey(state).split('\n')) addKey(key)
+    for (const bySession of [permissionsBySessionRef.current, formsBySessionRef.current]) {
+      for (const [sessionID, items] of Object.entries(bySession)) {
+        if (items.length === 0) continue
+        addKey(state.directories.get(sessionID))
+      }
+    }
+    addKey(resolveViewedRemoteDirectoryKey())
+    return keys
+  }, [resolveViewedRemoteDirectoryKey])
+
+  /**
+   * Limits directory-scoped work on a linked server to the directories that can hold pending work,
+   * because every directory-scoped request boots that server's location and stamps project activity.
+   * Local directories are always kept.
+   */
+  const filterTrackedDirectories = useCallback((directories: string[]): string[] => {
+    const activeRemoteDirectories = collectActiveRemoteDirectoryKeys()
+    return directories.filter((key) => {
+      if (isLocalOpenCodeServer(parseServerDirectoryKey(key).serverId)) return true
+      return activeRemoteDirectories.has(key)
+    })
+  }, [collectActiveRemoteDirectoryKeys])
+
+  const reconcilePendingActionsForDirectories = useCallback(async (trackedDirectories: string[]) => {
+    await Promise.all(filterTrackedDirectories(trackedDirectories).map(async (key) => {
       const { serverId, directory } = parseServerDirectoryKey(key)
       try {
         const [pendingPermissions, pendingForms] = await Promise.all([
@@ -720,7 +768,7 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
         }
       }
     }))
-  }, [reconcilePermissionsForDirectory, reconcileFormsForDirectory, prunePendingActions])
+  }, [reconcilePermissionsForDirectory, reconcileFormsForDirectory, prunePendingActions, filterTrackedDirectories])
 
   const collectTrackedDirectories = useCallback((): string[] => {
     const directories = new Set<string>()
@@ -817,8 +865,8 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
     await Promise.allSettled(sessionIDs.map((sessionID) => resolveUp(sessionID)))
   }, [])
 
-  const syncRunningShells = useCallback(async (directories: string[]) => {
-    await Promise.all(directories.map(async (key) => {
+  const syncRunningShells = useCallback(async (trackedDirectories: string[]) => {
+    await Promise.all(filterTrackedDirectories(trackedDirectories).map(async (key) => {
       const { serverId, directory } = parseServerDirectoryKey(key)
       const token = useSessionStatus.getState().beginShellSnapshot()
       try {
@@ -837,7 +885,20 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
         }
       }
     }))
-  }, [resolveSessionAncestry])
+  }, [resolveSessionAncestry, filterTrackedDirectories])
+
+  useEffect(() => {
+    const activeDirectories = activeSessionDirectoriesKey ? activeSessionDirectoriesKey.split('\n') : []
+    const alreadyReconciled = reconciledActiveDirectoriesRef.current
+    const newlyActive = activeDirectories.filter((key) => !alreadyReconciled.has(key))
+    reconciledActiveDirectoriesRef.current = new Set(activeDirectories)
+    const remoteDirectories = newlyActive.filter(
+      (key) => !isLocalOpenCodeServer(parseServerDirectoryKey(key).serverId),
+    )
+    if (remoteDirectories.length === 0) return
+    void reconcilePendingActionsForDirectories(remoteDirectories)
+    void syncRunningShells(remoteDirectories)
+  }, [activeSessionDirectoriesKey, reconcilePendingActionsForDirectories, syncRunningShells])
 
   const fetchInitialPendingData = useCallback(async () => {
     const reposToUse = reposRef.current
@@ -915,15 +976,29 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
     }
   }, [resolveSessionAncestry])
 
-  const reconcileRemoteServersOnce = useCallback((serversToReconcile: Array<{ id: string }>) => {
+  const reconcileRemoteDirectoryActivity = useCallback(async (
+    serverId: string,
+    extraDirectories: string[] = [],
+  ) => {
+    await reconcileRemoteSessionStatuses(serverId)
+    const directories = [...new Set([...collectTrackedDirectories(), ...extraDirectories])].filter(
+      (key) => parseServerDirectoryKey(key).serverId === serverId,
+    )
+    await Promise.all([
+      reconcilePendingActionsForServer(serverId, directories),
+      syncRunningShells(directories),
+    ])
+  }, [reconcileRemoteSessionStatuses, reconcilePendingActionsForServer, collectTrackedDirectories, syncRunningShells])
+
+  const reconcileRemoteServersOnce = useCallback(async (serversToReconcile: Array<{ id: string }>) => {
     const reconciled = reconciledRemoteServerIdsRef.current
-    for (const server of serversToReconcile) {
-      if (reconciled.has(server.id)) continue
+    const newServers = serversToReconcile.filter((server) => {
+      if (reconciled.has(server.id)) return false
       reconciled.add(server.id)
-      void reconcileRemoteSessionStatuses(server.id)
-      void reconcilePendingActionsForServer(server.id)
-    }
-  }, [reconcileRemoteSessionStatuses, reconcilePendingActionsForServer])
+      return true
+    })
+    await Promise.all(newServers.map((server) => reconcileRemoteDirectoryActivity(server.id)))
+  }, [reconcileRemoteDirectoryActivity])
 
   useEffect(() => {
     const enabledIds = new Set(enabledRemoteServers.map((server) => server.id))
@@ -931,7 +1006,7 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
       if (!enabledIds.has(serverId)) reconciledRemoteServerIdsRef.current.delete(serverId)
     }
     if (!streamConnectedRef.current) return
-    reconcileRemoteServersOnce(enabledRemoteServers)
+    void reconcileRemoteServersOnce(enabledRemoteServers)
   }, [enabledRemoteServers, reconcileRemoteServersOnce])
 
   const stopStatusPoll = useCallback(() => {
@@ -1154,7 +1229,7 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
         initialFetchDoneRef.current = false
         void reconcilePendingActionsForServer(LOCAL_OPENCODE_SERVER_ID)
         fetchInitialSessionStatuses()
-        reconcileRemoteServersOnce(enabledRemoteServersRef.current)
+        void reconcileRemoteServersOnce(enabledRemoteServersRef.current)
         void syncRunningShells(collectTrackedDirectories())
         invalidateChildSessionCaches(queryClient)
         invalidateQueryKeysDebounced(queryClient, LOCATION_CATALOG_QUERY_KEYS)
@@ -1170,12 +1245,7 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
 
     const handleResync = (subscribedDirectories: string[], serverId?: string) => {
       if (serverId && !isLocalOpenCodeServer(serverId)) {
-        const directories = subscribedDirectories.filter(
-          (key) => parseServerDirectoryKey(key).serverId === serverId,
-        )
-        void reconcilePendingActionsForServer(serverId, subscribedDirectories)
-        void reconcileRemoteSessionStatuses(serverId)
-        void syncRunningShells(directories)
+        void reconcileRemoteDirectoryActivity(serverId, subscribedDirectories)
         invalidateSessionListCachesDebounced(queryClient, undefined, serverId)
         invalidateQueryKeysDebounced(
           queryClient,
@@ -1214,7 +1284,7 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
       subscription.dispose()
       subscriptionRef.current = null
     }
-  }, [isAuthenticated, addPermission, removePermission, addForm, removeForm, forgetPendingActionsForSession, rememberSessionDirectory, fetchInitialSessionStatuses, startStatusPoll, stopStatusPoll, queryClient, handleHealthChange, reconcilePendingActionsForDirectories, reconcilePendingActionsForServer, collectTrackedDirectories, syncRunningShells, resolveSessionAncestry, reconcileRemoteSessionStatuses, reconcileRemoteServersOnce, invalidateRemoteStatusSyncs])
+  }, [isAuthenticated, addPermission, removePermission, addForm, removeForm, forgetPendingActionsForSession, rememberSessionDirectory, fetchInitialSessionStatuses, startStatusPoll, stopStatusPoll, queryClient, handleHealthChange, reconcilePendingActionsForDirectories, reconcilePendingActionsForServer, collectTrackedDirectories, syncRunningShells, resolveSessionAncestry, reconcileRemoteServersOnce, reconcileRemoteDirectoryActivity, invalidateRemoteStatusSyncs])
 
   useEffect(() => {
     reposRef.current = repos
diff --git a/frontend/src/hooks/useActiveRemoteDirectory.ts b/frontend/src/hooks/useActiveRemoteDirectory.ts
new file mode 100644
index 000000000..2beb70fd0
--- /dev/null
+++ b/frontend/src/hooks/useActiveRemoteDirectory.ts
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useQuery, useQueryClient, type QueryClient } from '@tanstack/react-query'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import type { SessionInfo } from '@opencode-manager/shared/opencode'
+import { findRemoteProjectForDirectory } from '@/api/opencode'
+import { sessionQueryOptions } from '@/hooks/useOpenCode'
+import { useRemoteProjects } from '@/hooks/useRemoteProjects'
+import { parseActivePickerSession, parseServerProjectRoute } from '@/lib/navigation'
+
+export interface ActiveRemoteDirectory {
+  directory: string | null
+  isPending: boolean
+}
+
+/**
+ * Reads the session cached on any directory variant of the shared session key for one server, so a
+ * page that already loaded the session does not make the picker wait for it again.
+ */
+function findCachedSession(
+  queryClient: QueryClient,
+  sessionID: string,
+  serverId: string,
+): SessionInfo | undefined {
+  const scopedServerId = serverId === LOCAL_OPENCODE_SERVER_ID ? undefined : serverId
+  const entries = queryClient.getQueriesData<SessionInfo>({
+    queryKey: ['opencode', 'session', sessionID],
+  })
+  return entries.find(([key]) => key[4] === scopedServerId)?.[1]
+}
+
+/**
+ * Resolves the linked server directory currently in view: the project route's directory when one
+ * matches the server, otherwise the canonical project directory that owns the session route's
+ * directory, falling back to that directory when no project owns it.
+ *
+ * @param serverId Linked server whose active directory is resolved.
+ * @param options.enabled Whether the lookups may run; omit for routes that always resolve them.
+ * @returns The active directory and whether a session route's directory is still resolving; the
+ * local server resolves neither.
+ */
+export function useActiveRemoteDirectory(
+  serverId: string,
+  { enabled = true }: { enabled?: boolean } = {},
+): ActiveRemoteDirectory {
+  const { pathname, search } = useLocation()
+  const queryClient = useQueryClient()
+  const isRemote = serverId !== LOCAL_OPENCODE_SERVER_ID
+  const projectRoute = parseServerProjectRoute(pathname, search)
+  const activeSession = parseActivePickerSession(pathname)
+  const sessionID = isRemote && activeSession.serverId === serverId
+    ? activeSession.sessionId
+    : undefined
+  const cachedSession = useMemo(
+    () => (sessionID ? findCachedSession(queryClient, sessionID, serverId) : undefined),
+    [queryClient, sessionID, serverId],
+  )
+  const sessionQuery = useQuery({
+    ...sessionQueryOptions(sessionID, undefined, serverId),
+    enabled: Boolean(sessionID) && enabled,
+    initialData: cachedSession,
+  })
+  const { projects } = useRemoteProjects(serverId, { enabled: enabled && isRemote })
+
+  if (projectRoute?.serverId === serverId) {
+    return { directory: projectRoute.directory, isPending: false }
+  }
+
+  const sessionDirectory = sessionQuery.data?.location.directory
+  return {
+    directory: sessionDirectory
+      ? findRemoteProjectForDirectory(projects, sessionDirectory)?.canonical ?? sessionDirectory
+      : null,
+    isPending: Boolean(sessionID) && enabled && sessionQuery.isPending,
+  }
+}
diff --git a/frontend/src/hooks/useContextUsage.test.tsx b/frontend/src/hooks/useContextUsage.test.tsx
index 4935aaf13..2f3110bdd 100644
--- a/frontend/src/hooks/useContextUsage.test.tsx
+++ b/frontend/src/hooks/useContextUsage.test.tsx
@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { renderHook } from '@testing-library/react'
+import { act, renderHook } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type {
@@ -87,7 +87,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.totalTokens).toBe(1515)
+    expect(result.current?.totalTokens).toBe(1515)
   })
 
   it('rounds the usage percentage against the model context limit', () => {
@@ -108,7 +108,28 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.usagePercentage).toBe(152)
+    expect(result.current?.usagePercentage).toBe(152)
+  })
+
+  it('reports the context limit measured against', () => {
+    mocks.useProviders.mockReturnValue({
+      data: { models: [{ providerID: 'anthropic', id: 'claude-sonnet', limit: { context: 1000 } }] },
+    })
+    const queryClient = createQueryClient()
+    seedTranscript(queryClient, [
+      assistantMessage('assistant-1', {
+        input: 10,
+        output: 5,
+        reasoning: 0,
+        cache: { read: 1000, write: 500 },
+      }),
+    ])
+
+    const { result } = renderHook(() => useContextUsage(SESSION_ID, DIRECTORY), {
+      wrapper: createWrapper(queryClient),
+    })
+
+    expect(result.current?.contextLimit).toBe(1000)
   })
 
   it('hides usage when the latest assistant has all-zero tokens even if an earlier one had usage', () => {
@@ -132,7 +153,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage).toBeNull()
+    expect(result.current).toBeNull()
   })
 
   it('skips the latest assistant when tokens are undefined and uses the earlier assistant', () => {
@@ -151,7 +172,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.totalTokens).toBe(1515)
+    expect(result.current?.totalTokens).toBe(1515)
   })
 
   it('ignores assistants before the latest completed compaction', () => {
@@ -170,7 +191,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage).toBeNull()
+    expect(result.current).toBeNull()
   })
 
   it('uses an assistant that appears after the latest completed compaction', () => {
@@ -195,7 +216,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.totalTokens).toBe(180)
+    expect(result.current?.totalTokens).toBe(180)
   })
 
   it('does not treat a running compaction as a boundary', () => {
@@ -214,7 +235,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.totalTokens).toBe(1515)
+    expect(result.current?.totalTokens).toBe(1515)
   })
 
   it('ignores assistants at or after the revert boundary', () => {
@@ -238,7 +259,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage?.totalTokens).toBe(1515)
+    expect(result.current?.totalTokens).toBe(1515)
   })
 
   it('hides usage when the revert boundary excludes every assistant', () => {
@@ -262,7 +283,7 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage).toBeNull()
+    expect(result.current).toBeNull()
   })
 
   it('hides usage when the revert boundary is unknown', () => {
@@ -280,6 +301,103 @@ describe('useContextUsage', () => {
       wrapper: createWrapper(queryClient),
     })
 
-    expect(result.current.usage).toBeNull()
+    expect(result.current).toBeNull()
+  })
+
+  it('keeps the usage object identity across transcript updates that do not change the totals', () => {
+    const queryClient = createQueryClient()
+    seedTranscript(queryClient, [
+      assistantMessage('assistant-1', {
+        input: 10,
+        output: 5,
+        reasoning: 0,
+        cache: { read: 1000, write: 500 },
+      }),
+    ])
+
+    const { result, rerender } = renderHook(() => useContextUsage(SESSION_ID, DIRECTORY), {
+      wrapper: createWrapper(queryClient),
+    })
+    const firstUsage = result.current
+
+    act(() => {
+      seedTranscript(queryClient, [
+        assistantMessage('assistant-1', {
+          input: 10,
+          output: 5,
+          reasoning: 0,
+          cache: { read: 1000, write: 500 },
+        }),
+        assistantMessage('assistant-2', undefined),
+      ])
+    })
+    rerender()
+
+    expect(result.current).toBe(firstUsage)
+    expect(result.current?.totalTokens).toBe(1515)
+  })
+
+  it('returns a new usage object when the token totals change', () => {
+    const queryClient = createQueryClient()
+    seedTranscript(queryClient, [
+      assistantMessage('assistant-1', {
+        input: 10,
+        output: 5,
+        reasoning: 0,
+        cache: { read: 1000, write: 500 },
+      }),
+    ])
+
+    const { result, rerender } = renderHook(() => useContextUsage(SESSION_ID, DIRECTORY), {
+      wrapper: createWrapper(queryClient),
+    })
+    const firstUsage = result.current
+
+    act(() => {
+      seedTranscript(queryClient, [
+        assistantMessage('assistant-1', {
+          input: 10,
+          output: 5,
+          reasoning: 0,
+          cache: { read: 1000, write: 500 },
+        }),
+        assistantMessage('assistant-2', {
+          input: 20,
+          output: 10,
+          reasoning: 0,
+          cache: { read: 100, write: 50 },
+        }),
+      ])
+    })
+    rerender()
+
+    expect(result.current).not.toBe(firstUsage)
+    expect(result.current?.totalTokens).toBe(180)
+  })
+
+  it('returns a new usage object when only the measurable context limit changes', () => {
+    const queryClient = createQueryClient()
+    seedTranscript(queryClient, [
+      assistantMessage('assistant-1', {
+        input: 10,
+        output: 5,
+        reasoning: 0,
+        cache: { read: 1000, write: 500 },
+      }),
+    ])
+
+    const { result, rerender } = renderHook(() => useContextUsage(SESSION_ID, DIRECTORY), {
+      wrapper: createWrapper(queryClient),
+    })
+    const firstUsage = result.current
+
+    mocks.useProviders.mockReturnValue({
+      data: { models: [{ providerID: 'anthropic', id: 'claude-sonnet', limit: { context: 1000 } }] },
+    })
+    rerender()
+
+    expect(result.current).not.toBe(firstUsage)
+    expect(result.current?.contextLimit).toBe(1000)
+    expect(result.current?.usagePercentage).toBe(152)
   })
 })
diff --git a/frontend/src/hooks/useContextUsage.ts b/frontend/src/hooks/useContextUsage.ts
index 171518125..a63307ee0 100644
--- a/frontend/src/hooks/useContextUsage.ts
+++ b/frontend/src/hooks/useContextUsage.ts
@@ -1,22 +1,13 @@
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import { skipToken, useQuery } from '@tanstack/react-query'
 import { findModelInfo } from '@opencode-manager/shared/opencode'
-import type { SessionMessageInfo } from '@opencode-manager/shared/opencode'
+import type { ModelInfo, SessionMessageInfo } from '@opencode-manager/shared/opencode'
 import { useProviders } from '@/hooks/useProviders'
 import { useOpenCodeServerId } from '@/contexts/OpenCodeServerContext'
 import { sessionTranscriptQueryKey } from '@/lib/queryInvalidation'
 import { serverScopedKey } from '@/lib/serverScope'
 import type { TranscriptCache } from '@/lib/session-projection'
-
-export interface ContextUsage {
-  totalTokens: number
-  usagePercentage: number | null
-}
-
-interface ContextUsageResult {
-  usage: ContextUsage | null
-  isLoading: boolean
-}
+import type { ContextUsage } from '@/lib/contextUsage'
 
 function lastCompletedCompactionIndex(messages: SessionMessageInfo[], end: number): number {
   for (let index = end - 1; index >= 0; index -= 1) {
@@ -34,52 +25,81 @@ function lastAssistantWithUsageIndex(messages: SessionMessageInfo[], start: numb
   return -1
 }
 
+function computeContextUsage(
+  messages: SessionMessageInfo[],
+  models: ModelInfo[] | undefined,
+  revertMessageID: string | undefined,
+): ContextUsage | null {
+  const boundaryIndex = revertMessageID
+    ? messages.findIndex((message) => message.id === revertMessageID)
+    : -1
+  if (revertMessageID && boundaryIndex === -1) {
+    return null
+  }
+
+  const end = boundaryIndex === -1 ? messages.length : boundaryIndex
+  const compactionIndex = lastCompletedCompactionIndex(messages, end)
+  const assistantIndex = lastAssistantWithUsageIndex(messages, compactionIndex, end)
+  const assistant = assistantIndex === -1 ? undefined : messages[assistantIndex]
+  if (assistant?.type !== 'assistant' || assistant.tokens === undefined) {
+    return null
+  }
+
+  const { input, output, reasoning, cache } = assistant.tokens
+  const totalTokens = input + output + reasoning + cache.read + cache.write
+  if (totalTokens <= 0) {
+    return null
+  }
+
+  const model = models
+    ? findModelInfo(models, { providerID: assistant.model.providerID, modelID: assistant.model.id })
+    : undefined
+  const contextLimit = model?.limit.context ?? null
+  const usagePercentage = contextLimit ? Math.round((totalTokens / contextLimit) * 100) : null
+
+  return { totalTokens, usagePercentage, contextLimit }
+}
+
+function hasSameUsage(left: ContextUsage | null, right: ContextUsage | null): boolean {
+  if (left === null || right === null) return left === right
+
+  return left.totalTokens === right.totalTokens
+    && left.usagePercentage === right.usagePercentage
+    && left.contextLimit === right.contextLimit
+}
+
+/**
+ * Latest assistant context usage for a session.
+ *
+ * The transcript cache is rewritten on every streaming flush, so the returned object keeps its
+ * identity while the measured totals are unchanged. That lets consumers memoize on the reference
+ * instead of re-rendering for each frame of a reply.
+ */
 export const useContextUsage = (
   sessionID: string | undefined,
   directory?: string,
   revertMessageID?: string,
-): ContextUsageResult => {
+): ContextUsage | null => {
   const serverId = useOpenCodeServerId()
   const transcriptQuery = useQuery<TranscriptCache>({
     queryKey: serverScopedKey(sessionTranscriptQueryKey(sessionID ?? ''), serverId),
     queryFn: skipToken,
   })
   const transcriptData = transcriptQuery.data
-  const messagesLoading = transcriptQuery.isPending
 
   const { data: providersData } = useProviders(directory)
   const models = providersData?.models
 
-  return useMemo(() => {
-    const messages = transcriptData?.transcript.messages ?? []
+  const lastUsageRef = useRef<ContextUsage | null>(null)
 
-    const boundaryIndex = revertMessageID
-      ? messages.findIndex((message) => message.id === revertMessageID)
-      : -1
-    if (revertMessageID && boundaryIndex === -1) {
-      return { usage: null, isLoading: messagesLoading }
-    }
-
-    const end = boundaryIndex === -1 ? messages.length : boundaryIndex
-    const compactionIndex = lastCompletedCompactionIndex(messages, end)
-    const assistantIndex = lastAssistantWithUsageIndex(messages, compactionIndex, end)
-    const assistant = assistantIndex === -1 ? undefined : messages[assistantIndex]
-    if (assistant?.type !== 'assistant' || assistant.tokens === undefined) {
-      return { usage: null, isLoading: messagesLoading }
-    }
-
-    const { input, output, reasoning, cache } = assistant.tokens
-    const totalTokens = input + output + reasoning + cache.read + cache.write
-    if (totalTokens <= 0) {
-      return { usage: null, isLoading: messagesLoading }
-    }
-
-    const model = models
-      ? findModelInfo(models, { providerID: assistant.model.providerID, modelID: assistant.model.id })
-      : undefined
-    const contextLimit = model?.limit.context
-    const usagePercentage = contextLimit ? Math.round((totalTokens / contextLimit) * 100) : null
-
-    return { usage: { totalTokens, usagePercentage }, isLoading: messagesLoading }
-  }, [transcriptData, messagesLoading, models, revertMessageID])
+  return useMemo(() => {
+    const computed = computeContextUsage(
+      transcriptData?.transcript.messages ?? [],
+      models,
+      revertMessageID,
+    )
+    const usage = hasSameUsage(lastUsageRef.current, computed) ? lastUsageRef.current : computed
+    lastUsageRef.current = usage
+    return usage
+  }, [transcriptData, models, revertMessageID])
 }
diff --git a/frontend/src/hooks/useGit.test.tsx b/frontend/src/hooks/useGit.test.tsx
index 7725e1839..fa16da662 100644
--- a/frontend/src/hooks/useGit.test.tsx
+++ b/frontend/src/hooks/useGit.test.tsx
@@ -66,6 +66,7 @@ vi.mock('@tanstack/react-query', async () => {
         invalidateQueries: (...args: unknown[]) => unknown
         setQueryData: (...args: unknown[]) => unknown
         setQueriesData: (...args: unknown[]) => unknown
+        getQueryData: (...args: unknown[]) => unknown
       } | null
       return {
         invalidateQueries: (...args: unknown[]) => {
@@ -80,6 +81,7 @@ vi.mock('@tanstack/react-query', async () => {
           mockSetQueriesData(...args)
           return real?.setQueriesData(...args)
         },
+        getQueryData: (...args: unknown[]) => real?.getQueryData(...args),
       }
     })
   }
@@ -335,6 +337,8 @@ describe('useGit', () => {
 
   describe('renameBranch mutation', () => {
     it('calls correct API and updates the status cache on success', async () => {
+      const realClient = mockRealQueryClient.current as QueryClient
+      realClient.setQueryData(['repo', 1], { fullPath: '/abs/repos/my-repo' })
       const { result } = renderHook(() => useGit(1), { wrapper: createWrapper() })
 
       await waitFor(() => {
@@ -343,6 +347,10 @@ describe('useGit', () => {
 
       expect(gitApi.gitRenameBranch).toHaveBeenCalledWith(1, { from: 'main', to: 'renamed' })
       expectTargetedStatusCacheUpdate()
+      expect(mockInvalidateQueries).toHaveBeenCalledWith({
+        queryKey: ['opencode', 'vcs', '/abs/repos/my-repo', 'info'],
+        exact: true,
+      })
       expect(toast.showToast.success).toHaveBeenCalledWith('Branch renamed')
     })
 
diff --git a/frontend/src/hooks/useGit.ts b/frontend/src/hooks/useGit.ts
index 8f5e4987a..cbd06981d 100644
--- a/frontend/src/hooks/useGit.ts
+++ b/frontend/src/hooks/useGit.ts
@@ -3,9 +3,10 @@ import type { QueryClient } from '@tanstack/react-query'
 import { gitFetch, gitPull, gitPush, gitCommit, gitStageFiles, gitUnstageFiles, gitDiscardFiles, fetchGitLog, fetchGitDiff, gitReset, gitRenameBranch, gitDeleteBranch, gitStashPush, gitStashApply, gitStashDrop, gitContinueOperation, gitAbortOperation, gitGenerateCommitMessage, gitIntegrateBranch, getApiErrorMessage, fetchGitStatus } from '@/api/git'
 import { createBranch } from '@/api/repos'
 import type { DeleteBranchRequest, DeleteBranchResult, IntegrateBranchRequest, RenameBranchRequest, StashPushRequest } from '@opencode-manager/shared'
+import type { Repo } from '@/api/types'
 import type { GitStatusResponse } from '@/types/git'
 import { showToast } from '@/lib/toast'
-import { invalidateRepoGitCaches, setRepoGitStatusCaches } from '@/lib/queryInvalidation'
+import { invalidateRepoGitCaches, invalidateVcsInfoCache, setRepoGitStatusCaches } from '@/lib/queryInvalidation'
 
 interface RepoGitMutationConfig<TData, TVariables> {
   mutationFn: (repoId: number, variables: TVariables) => Promise<TData>
@@ -160,12 +161,13 @@ export function useGit(repoId: number | undefined, onError?: (error: unknown) =>
   const createBranchMutation = useMutation({
     mutationFn: async (branchName: string) => {
       if (!repoId) throw new Error('No repo ID')
-      await createBranch(repoId, branchName)
-      return fetchGitStatus(repoId)
+      const createdRepo = await createBranch(repoId, branchName)
+      return { createdRepo, status: await fetchGitStatus(repoId) }
     },
-    onSuccess: (data) => {
-      if (repoId) setRepoGitStatusCaches(queryClient, repoId, data)
+    onSuccess: ({ createdRepo, status }) => {
+      if (repoId) setRepoGitStatusCaches(queryClient, repoId, status)
       invalidateRepoGitCaches(queryClient, repoId, { invalidateStatus: false })
+      invalidateVcsInfoCache(queryClient, createdRepo.fullPath)
       showToast.success('Branch created')
     },
     onError: handleError,
@@ -191,7 +193,10 @@ export function useGit(repoId: number | undefined, onError?: (error: unknown) =>
     {
       mutationFn: gitRenameBranch,
       statusFromData: (data) => data,
-      invalidate: (client, id) => invalidateRepoGitCaches(client, id, { invalidateStatus: false }),
+      invalidate: (client, id) => {
+        invalidateRepoGitCaches(client, id, { invalidateStatus: false })
+        invalidateVcsInfoCache(client, client.getQueryData<Repo>(['repo', id])?.fullPath)
+      },
       successMessage: 'Branch renamed',
     },
   )
diff --git a/frontend/src/hooks/useMobileTabBar.test.tsx b/frontend/src/hooks/useMobileTabBar.test.tsx
index ea0c6ff19..466b76916 100644
--- a/frontend/src/hooks/useMobileTabBar.test.tsx
+++ b/frontend/src/hooks/useMobileTabBar.test.tsx
@@ -13,9 +13,9 @@ describe('useMobileTabBar', () => {
 
   it('returns the correct openSheet when mobileTab param is set', () => {
     const { result } = renderHook(() => useMobileTabBar(), {
-      wrapper: createRouterWrapper(['/?mobileTab=repos']),
+      wrapper: createRouterWrapper(['/?mobileTab=sessions']),
     })
-    expect(result.current.openSheet).toBe('repos')
+    expect(result.current.openSheet).toBe('sessions')
   })
 
   it('open sets the mobileTab param', () => {
@@ -45,7 +45,7 @@ describe('useMobileTabBar', () => {
   })
 
   it('handles all valid MobileSheetKey values', () => {
-    const validKeys = ['repos', 'files', 'notifications', 'more'] as const
+    const validKeys = ['sessions', 'files', 'notifications', 'more'] as const
     validKeys.forEach((key) => {
       const { result } = renderHook(() => useMobileTabBar(), {
         wrapper: createRouterWrapper([`/?mobileTab=${key}`]),
@@ -56,7 +56,7 @@ describe('useMobileTabBar', () => {
 
   it('returns stable openSheet identity across rerenders when search is unchanged', () => {
     const { result, rerender } = renderHook(() => useMobileTabBar(), {
-      wrapper: createRouterWrapper(['/?mobileTab=repos']),
+      wrapper: createRouterWrapper(['/?mobileTab=sessions']),
     })
     const firstOpenSheet = result.current.openSheet
     rerender()
diff --git a/frontend/src/hooks/useMobileTabBar.ts b/frontend/src/hooks/useMobileTabBar.ts
index ad06fa6d2..d93310ae2 100644
--- a/frontend/src/hooks/useMobileTabBar.ts
+++ b/frontend/src/hooks/useMobileTabBar.ts
@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react'
 import { useUrlParams } from './useUrlParams'
 
-type MobileSheetKey = 'repos' | 'files' | 'notifications' | 'more'
+type MobileSheetKey = 'sessions' | 'files' | 'notifications' | 'more'
 
 interface UseMobileTabBarReturn {
   openSheet: MobileSheetKey | null
@@ -14,7 +14,7 @@ export function useMobileTabBar(): UseMobileTabBarReturn {
 
   const openSheet = useMemo<MobileSheetKey | null>(() => {
     const v = searchParams.get('mobileTab')
-    return (v === 'repos' || v === 'files' || v === 'notifications' || v === 'more') ? v : null
+    return (v === 'sessions' || v === 'files' || v === 'notifications' || v === 'more') ? v : null
   }, [searchParams])
 
   const open = useCallback((key: MobileSheetKey) => {
diff --git a/frontend/src/hooks/useOpenCode.test.tsx b/frontend/src/hooks/useOpenCode.test.tsx
index 4a611dd66..f187e3991 100644
--- a/frontend/src/hooks/useOpenCode.test.tsx
+++ b/frontend/src/hooks/useOpenCode.test.tsx
@@ -174,6 +174,27 @@ describe('useSessionsAcrossDirectories', () => {
     expect(result.current.data.map((session) => session.id)).toEqual(['ses_all1', 'ses_all2'])
   })
 
+  it('queries all directories when allDirectories is set without a directory scope', async () => {
+    mocks.listSessionPage.mockResolvedValue({ items: [sessionInfo('ses_all', '/w/a')] })
+
+    const queryClient = createQueryClient()
+    const { result } = renderHook(
+      () => useSessionsAcrossDirectories([], { allDirectories: true }),
+      { wrapper: createWrapper(queryClient) },
+    )
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(mocks.listSessionPage).toHaveBeenCalledWith({
+      limit: 25,
+      order: 'desc',
+      search: undefined,
+    }, 'local')
+    expect(result.current.data.map((session) => session.id)).toEqual(['ses_all'])
+  })
+
   it('requests child sessions and records includeChildren in the query key', async () => {
     mocks.listSessionPage.mockResolvedValue({ items: [sessionInfo('ses_child', '/w/a')] })
 
diff --git a/frontend/src/hooks/useOpenCode.ts b/frontend/src/hooks/useOpenCode.ts
index 09df0032a..dc2db00a2 100644
--- a/frontend/src/hooks/useOpenCode.ts
+++ b/frontend/src/hooks/useOpenCode.ts
@@ -177,7 +177,7 @@ export const useSessionsAcrossDirectories = (
         }
       : undefined,
     getNextPageParam: (lastPage) => lastPage.nextParam,
-    enabled: uniqueDirectories.length > 0,
+    enabled: uniqueDirectories.length > 0 || allDirectories,
     staleTime: 10000,
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,
diff --git a/frontend/src/hooks/useOverlayReturnFocus.test.tsx b/frontend/src/hooks/useOverlayReturnFocus.test.tsx
new file mode 100644
index 000000000..b12b910ea
--- /dev/null
+++ b/frontend/src/hooks/useOverlayReturnFocus.test.tsx
@@ -0,0 +1,71 @@
+import { useRef, useState, type ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it } from 'vitest'
+import { stubMatchMedia } from '@/test/test-utils'
+import { useOverlayReturnFocus } from './useOverlayReturnFocus'
+
+function OverlayHost({ children }: { children?: ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const { handleCloseAutoFocus } = useOverlayReturnFocus(open)
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  const close = () => {
+    const event = new Event('closeautofocus', { cancelable: true })
+    Object.defineProperty(event, 'currentTarget', { value: overlayRef.current })
+    handleCloseAutoFocus(event)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>open overlay</button>
+      {open && (
+        <div ref={overlayRef} tabIndex={-1} data-testid="overlay">
+          <button type="button" onClick={close}>close overlay</button>
+          {children}
+        </div>
+      )}
+    </>
+  )
+}
+
+async function openOverlay() {
+  const opener = screen.getByRole('button', { name: 'open overlay' })
+  opener.focus()
+  await userEvent.setup().click(opener)
+  return opener
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(window, 'matchMedia')
+})
+
+describe('useOverlayReturnFocus', () => {
+  it('restores focus to the opener when the overlay closes', async () => {
+    stubMatchMedia(true)
+    render(<OverlayHost />)
+
+    const opener = await openOverlay()
+    await userEvent.setup().click(screen.getByRole('button', { name: 'close overlay' }))
+
+    expect(screen.queryByTestId('overlay')).not.toBeInTheDocument()
+    expect(opener).toHaveFocus()
+  })
+
+  it('captures the opener before a child with autoFocus claims focus', async () => {
+    stubMatchMedia(true)
+    render(
+      <OverlayHost>
+        <input aria-label="overlay input" autoFocus />
+      </OverlayHost>,
+    )
+
+    const opener = await openOverlay()
+    expect(screen.getByLabelText('overlay input')).toHaveFocus()
+
+    await userEvent.setup().click(screen.getByRole('button', { name: 'close overlay' }))
+
+    expect(opener).toHaveFocus()
+  })
+})
diff --git a/frontend/src/hooks/useOverlayReturnFocus.ts b/frontend/src/hooks/useOverlayReturnFocus.ts
new file mode 100644
index 000000000..53d013ea3
--- /dev/null
+++ b/frontend/src/hooks/useOverlayReturnFocus.ts
@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react'
+import { getFocusedElement, restoreOverlayFocus } from '@/lib/overlayFocus'
+
+export interface OverlayReturnFocus {
+  handleCloseAutoFocus: (event: Event) => void
+}
+
+/**
+ * Captures the element that owns focus when an overlay opens and restores focus to it when the
+ * overlay reports its close-autofocus event.
+ *
+ * The opener is captured during render on the closed-to-open transition, before children with
+ * `autoFocus` claim focus during commit, and the captured value survives re-renders while the
+ * overlay stays open. The returned handler prevents the close event's default focus handling only
+ * when focus was actually moved.
+ */
+export function useOverlayReturnFocus(open: boolean | undefined): OverlayReturnFocus {
+  const [openState, setOpenState] = useState(() => ({
+    open,
+    returnFocus: open ? getFocusedElement() : null,
+  }))
+
+  if (openState.open !== open) {
+    setOpenState({ open, returnFocus: open ? getFocusedElement() : openState.returnFocus })
+  }
+
+  const { returnFocus } = openState
+  const handleCloseAutoFocus = useCallback(
+    (event: Event) => {
+      if (restoreOverlayFocus(returnFocus, event.currentTarget as Element | null)) {
+        event.preventDefault()
+      }
+    },
+    [returnFocus],
+  )
+
+  return { handleCloseAutoFocus }
+}
diff --git a/frontend/src/hooks/useRemoteProjects.test.tsx b/frontend/src/hooks/useRemoteProjects.test.tsx
new file mode 100644
index 000000000..741e61a7a
--- /dev/null
+++ b/frontend/src/hooks/useRemoteProjects.test.tsx
@@ -0,0 +1,214 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { OpenCodeProject } from '@/api/opencode'
+import { useRemoteProjects, useRemoteProjectsByActivity } from './useRemoteProjects'
+
+const mocks = vi.hoisted(() => ({
+  listProjects: vi.fn(),
+  listSessionPage: vi.fn(),
+  useOpenCodeServers: vi.fn(),
+}))
+
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return { ...actual, listProjects: mocks.listProjects, listSessionPage: mocks.listSessionPage }
+})
+
+vi.mock('@/hooks/useOpenCodeServers', () => ({
+  useOpenCodeServers: mocks.useOpenCodeServers,
+}))
+
+const kitchen = {
+  id: 'srv_kitchen',
+  name: 'Kitchen',
+  baseUrl: 'https://kitchen.example.com',
+  username: 'opencode',
+  enabled: true,
+  hasPassword: true,
+  createdAt: 1,
+  updatedAt: 2,
+}
+
+function createProject(
+  id: string,
+  time: { created: number; updated: number; active?: number },
+): OpenCodeProject {
+  return { id, name: id, canonical: `/work/${id}`, time, sandboxes: [] }
+}
+
+function createSession(id: string, directory: string, updated: number) {
+  return {
+    id,
+    projectID: 'prj_1',
+    cost: 0,
+    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    time: { created: updated - 1000, updated },
+    location: { directory },
+  }
+}
+
+function createWrapper() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+describe('useRemoteProjects', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.useOpenCodeServers.mockReturnValue({ servers: [kitchen], isLoading: false })
+    mocks.listProjects.mockResolvedValue([])
+    mocks.listSessionPage.mockResolvedValue({ items: [] })
+  })
+
+  it('lists the projects of the linked server, most recently updated first', async () => {
+    const stale = createProject('stale', { created: 1, updated: 900, active: 100 })
+    const recent = createProject('recent', { created: 1, updated: 100, active: 900 })
+    mocks.listProjects.mockResolvedValue([stale, recent])
+
+    const { result } = renderHook(() => useRemoteProjects('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.projects).toHaveLength(2))
+    expect(result.current.projects.map((project) => project.id)).toEqual(['stale', 'recent'])
+    expect(mocks.listProjects).toHaveBeenCalledWith('srv_kitchen')
+  })
+
+  it('does not fetch sessions for the canonical project lookup', async () => {
+    mocks.listProjects.mockResolvedValue([createProject('app', { created: 1, updated: 2 })])
+
+    const { result } = renderHook(() => useRemoteProjects('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.projects).toHaveLength(1))
+    expect(mocks.listSessionPage).not.toHaveBeenCalled()
+  })
+
+  it('stays idle while the linked server is disabled', () => {
+    mocks.useOpenCodeServers.mockReturnValue({
+      servers: [{ ...kitchen, enabled: false }],
+      isLoading: false,
+    })
+
+    const { result } = renderHook(() => useRemoteProjects('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    expect(result.current.isLoading).toBe(false)
+    expect(result.current.projects).toEqual([])
+    expect(mocks.listProjects).not.toHaveBeenCalled()
+  })
+
+  it('stays idle when the caller disables it', () => {
+    renderHook(() => useRemoteProjects('srv_kitchen', { enabled: false }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(mocks.listProjects).not.toHaveBeenCalled()
+  })
+
+  it('keeps the cached projects and reports the failure when a refetch fails', async () => {
+    mocks.listProjects
+      .mockResolvedValueOnce([createProject('app', { created: 1, updated: 2 })])
+      .mockRejectedValueOnce(new Error('offline'))
+
+    const { result } = renderHook(() => useRemoteProjects('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.projects).toHaveLength(1))
+
+    result.current.refetch()
+
+    await waitFor(() => expect(result.current.isError).toBe(true))
+    expect(result.current.hasData).toBe(true)
+    expect(result.current.projects.map((project) => project.id)).toEqual(['app'])
+    expect(result.current.error?.message).toBe('offline')
+  })
+})
+
+describe('useRemoteProjectsByActivity', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.useOpenCodeServers.mockReturnValue({ servers: [kitchen], isLoading: false })
+    mocks.listSessionPage.mockResolvedValue({ items: [] })
+  })
+
+  it('orders and dates projects by their newest session', async () => {
+    mocks.listProjects.mockResolvedValue([
+      createProject('idle', { created: 1, updated: 900, active: 999 }),
+      createProject('worked', { created: 1, updated: 100, active: 999 }),
+    ])
+    mocks.listSessionPage.mockResolvedValue({
+      items: [createSession('ses_1', '/work/worked', 500)],
+    })
+
+    const { result } = renderHook(() => useRemoteProjectsByActivity('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.activityById.get('worked')).toBe(500))
+    expect(result.current.projects.map((project) => project.id)).toEqual(['worked', 'idle'])
+    expect(result.current.activityById.get('idle')).toBe(900)
+  })
+
+  it('sorts a project without a session after the session-backed ones', async () => {
+    mocks.listProjects.mockResolvedValue([
+      createProject('quiet', { created: 1, updated: 950 }),
+      createProject('worked', { created: 1, updated: 100 }),
+    ])
+    mocks.listSessionPage.mockResolvedValue({
+      items: [createSession('ses_1', '/work/worked', 300)],
+    })
+
+    const { result } = renderHook(() => useRemoteProjectsByActivity('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.activityById.get('worked')).toBe(300))
+    expect(result.current.projects.map((project) => project.id)).toEqual(['worked', 'quiet'])
+  })
+
+  it('fetches one session page per server, newest first and across every directory', async () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+    mocks.listProjects.mockResolvedValue([
+      createProject('alpha', { created: 1, updated: 10 }),
+      createProject('beta', { created: 1, updated: 20 }),
+      createProject('gamma', { created: 1, updated: 30 }),
+    ])
+    mocks.listSessionPage.mockResolvedValue({ items: [] })
+
+    const { result } = renderHook(() => useRemoteProjectsByActivity('srv_kitchen'), { wrapper })
+
+    await waitFor(() => expect(result.current.projects).toHaveLength(3))
+    await waitFor(() => expect(mocks.listSessionPage).toHaveBeenCalledTimes(1))
+
+    expect(mocks.listSessionPage).toHaveBeenCalledWith(
+      { limit: 100, order: 'desc' },
+      'srv_kitchen',
+    )
+  })
+
+  it('stays idle while the linked server is disabled', () => {
+    mocks.useOpenCodeServers.mockReturnValue({
+      servers: [{ ...kitchen, enabled: false }],
+      isLoading: false,
+    })
+
+    const { result } = renderHook(() => useRemoteProjectsByActivity('srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    expect(result.current.projects).toEqual([])
+    expect(mocks.listProjects).not.toHaveBeenCalled()
+    expect(mocks.listSessionPage).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/hooks/useRemoteProjects.ts b/frontend/src/hooks/useRemoteProjects.ts
new file mode 100644
index 000000000..fc81bb542
--- /dev/null
+++ b/frontend/src/hooks/useRemoteProjects.ts
@@ -0,0 +1,120 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { listProjects, rankProjectsBySessionActivity, sortProjectsByUpdatedAt, type OpenCodeProject } from '@/api/opencode'
+import { useOpenCodeServers } from '@/hooks/useOpenCodeServers'
+import { useSessionsAcrossDirectories } from '@/hooks/useOpenCode'
+import { serverScopedKey } from '@/lib/serverScope'
+
+const REMOTE_PROJECT_ACTIVITY_SESSION_LIMIT = 100
+
+export interface UseRemoteProjectsOptions {
+  /** Caller-side gate that applies on top of the server's own enabled flag. */
+  enabled?: boolean
+}
+
+export interface UseRemoteProjectsResult {
+  projects: OpenCodeProject[]
+  isLoading: boolean
+  isError: boolean
+  hasData: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+export interface UseRemoteProjectsByActivityResult extends UseRemoteProjectsResult {
+  /** Activity time per project id, for surfaces that label rows with it. */
+  activityById: ReadonlyMap<string, number>
+}
+
+/**
+ * Builds the query options for one linked server's project list so every reader shares the same
+ * cache entry and retry policy.
+ *
+ * @param serverId Linked server whose projects are listed.
+ * @returns The query options, without the caller's own enabled gate.
+ */
+export function remoteProjectsQueryOptions(serverId: string) {
+  return {
+    queryKey: serverScopedKey(['opencode', 'projects'], serverId),
+    queryFn: () => listProjects(serverId),
+    retry: false,
+  }
+}
+
+/**
+ * Loads the projects of one linked server, most recently updated first, while that server is enabled.
+ *
+ * This is the canonical lookup every caller uses to resolve a directory to its project, so it never
+ * fetches sessions.
+ *
+ * @param serverId Linked server whose projects are listed.
+ * @param options Caller-side gate for when the projects may be fetched.
+ * @returns The update-sorted projects plus the query state callers render.
+ */
+export function useRemoteProjects(
+  serverId: string,
+  options: UseRemoteProjectsOptions = {},
+): UseRemoteProjectsResult {
+  const enabled = options.enabled ?? true
+  const { servers } = useOpenCodeServers({ enabled })
+  const isServerEnabled = servers.find((server) => server.id === serverId)?.enabled === true
+  const projectsQuery = useQuery({
+    ...remoteProjectsQueryOptions(serverId),
+    enabled: enabled && isServerEnabled,
+  })
+
+  const projects = useMemo(
+    () => sortProjectsByUpdatedAt(projectsQuery.data ?? []),
+    [projectsQuery.data],
+  )
+
+  return {
+    projects,
+    isLoading: projectsQuery.isLoading,
+    isError: projectsQuery.isError,
+    hasData: projectsQuery.data !== undefined,
+    error: projectsQuery.error,
+    refetch: projectsQuery.refetch,
+  }
+}
+
+/**
+ * Loads the projects of one linked server with the activity time shown and sorted by list surfaces.
+ *
+ * A single first page of the server's sessions, newest first and across every directory, is enough to
+ * date each project; the page is requested only once the projects are known, so canonical lookups
+ * through {@link useRemoteProjects} never pay for it.
+ *
+ * @param serverId Linked server whose projects are listed.
+ * @param options Caller-side gate for when the projects and their sessions may be fetched.
+ * @returns The activity-sorted projects, their activity times by project id, and the query state.
+ */
+export function useRemoteProjectsByActivity(
+  serverId: string,
+  options: UseRemoteProjectsOptions = {},
+): UseRemoteProjectsByActivityResult {
+  const projectsResult = useRemoteProjects(serverId, options)
+  const { data: sessions } = useSessionsAcrossDirectories([], {
+    serverId,
+    allDirectories: projectsResult.hasData,
+    limit: REMOTE_PROJECT_ACTIVITY_SESSION_LIMIT,
+  })
+
+  const activity = useMemo(
+    () => rankProjectsBySessionActivity(projectsResult.projects, sessions),
+    [projectsResult.projects, sessions],
+  )
+
+  const projects = useMemo(() => activity.map((entry) => entry.project), [activity])
+
+  const activityById = useMemo(
+    () => new Map(activity.map((entry) => [entry.project.id, entry.activityAt])),
+    [activity],
+  )
+
+  return {
+    ...projectsResult,
+    projects,
+    activityById,
+  }
+}
diff --git a/frontend/src/hooks/useSessionPickerLocationPrefetch.test.tsx b/frontend/src/hooks/useSessionPickerLocationPrefetch.test.tsx
new file mode 100644
index 000000000..f2661c013
--- /dev/null
+++ b/frontend/src/hooks/useSessionPickerLocationPrefetch.test.tsx
@@ -0,0 +1,130 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { MemoryRouter } from 'react-router-dom'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import type { Repo } from '@/api/types'
+import { openCodeLocationQueryOptions } from '@/lib/openCodeLocation'
+import { useSessionPickerLocationPrefetch } from './useSessionPickerLocationPrefetch'
+
+const mocks = vi.hoisted(() => ({
+  listRepos: vi.fn(),
+  getOpenCodeLocation: vi.fn(),
+}))
+
+vi.mock('@/api/repos', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/repos')>()
+  return {
+    ...actual,
+    listRepos: mocks.listRepos,
+  }
+})
+
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return {
+    ...actual,
+    getOpenCodeLocation: mocks.getOpenCodeLocation,
+  }
+})
+
+const REPO_PATH = '/repo'
+const LOCATION = { directory: REPO_PATH, projectID: 'proj_1', worktree: REPO_PATH }
+
+const repo: Repo = {
+  id: 1,
+  fullPath: REPO_PATH,
+  localPath: REPO_PATH,
+  defaultBranch: 'main',
+  cloneStatus: 'ready',
+  clonedAt: 0,
+}
+
+function createQueryClient() {
+  return new QueryClient({ defaultOptions: { queries: { retry: false } } })
+}
+
+function createWrapper(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={['/repos/1/sessions/session-1']}>{children}</MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+}
+
+describe('useSessionPickerLocationPrefetch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getOpenCodeLocation.mockResolvedValue(LOCATION)
+  })
+
+  afterEach(() => {
+    mocks.listRepos.mockReset()
+  })
+
+  it('prefetches the location once repos data arrives after mount', async () => {
+    let resolveRepos: (repos: Repo[]) => void = () => {}
+    mocks.listRepos.mockImplementation(
+      () => new Promise<Repo[]>((resolve) => {
+        resolveRepos = resolve
+      }),
+    )
+    const queryClient = createQueryClient()
+
+    renderHook(() => useSessionPickerLocationPrefetch(), {
+      wrapper: createWrapper(queryClient),
+    })
+
+    expect(mocks.getOpenCodeLocation).not.toHaveBeenCalled()
+
+    await act(async () => {
+      resolveRepos([repo])
+    })
+
+    await waitFor(() => {
+      expect(mocks.getOpenCodeLocation).toHaveBeenCalledWith(REPO_PATH, LOCAL_OPENCODE_SERVER_ID)
+    })
+
+    const locationQuery = queryClient
+      .getQueryCache()
+      .find({ queryKey: openCodeLocationQueryOptions(REPO_PATH, LOCAL_OPENCODE_SERVER_ID).queryKey })
+    expect(locationQuery?.observers.length).toBe(0)
+  })
+
+  it('prefetches the location when repos data is already cached', async () => {
+    mocks.listRepos.mockResolvedValue([repo])
+    const queryClient = createQueryClient()
+    queryClient.setQueryData<Repo[]>(['repos'], [repo])
+
+    renderHook(() => useSessionPickerLocationPrefetch(), {
+      wrapper: createWrapper(queryClient),
+    })
+
+    await waitFor(() => {
+      expect(mocks.getOpenCodeLocation).toHaveBeenCalledWith(REPO_PATH, LOCAL_OPENCODE_SERVER_ID)
+    })
+  })
+
+  it('does not prefetch when the route has no repo', async () => {
+    mocks.listRepos.mockResolvedValue([repo])
+    const queryClient = createQueryClient()
+    queryClient.setQueryData<Repo[]>(['repos'], [repo])
+
+    renderHook(() => useSessionPickerLocationPrefetch(), {
+      wrapper: ({ children }: { children: ReactNode }) => (
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={['/sessions/session-1']}>{children}</MemoryRouter>
+        </QueryClientProvider>
+      ),
+    })
+
+    await waitFor(() => {
+      expect(mocks.listRepos).toHaveBeenCalled()
+    })
+
+    expect(mocks.getOpenCodeLocation).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/hooks/useSessionPickerLocationPrefetch.ts b/frontend/src/hooks/useSessionPickerLocationPrefetch.ts
new file mode 100644
index 000000000..f3936704e
--- /dev/null
+++ b/frontend/src/hooks/useSessionPickerLocationPrefetch.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useQueryClient } from '@tanstack/react-query'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import { openCodeLocationQueryOptions } from '@/lib/openCodeLocation'
+import { parseRepoRoute } from '@/lib/navigation'
+import { useNavigableRepos } from '@/hooks/useSidebarRepoGroups'
+
+/**
+ * Warms the picker's project location on a local repo route so the first session picker open does
+ * not serialise the location lookup ahead of the session list. The repo path comes from the repos
+ * query the repo worktrees provider already observes, so a route restored before that query settles
+ * still prefetches once the repo data arrives. The prefetch never creates a query observer.
+ */
+export function useSessionPickerLocationPrefetch(): void {
+  const { pathname } = useLocation()
+  const queryClient = useQueryClient()
+  const { repos } = useNavigableRepos()
+  const repoId = parseRepoRoute(pathname).repoId
+  const repoPath = repos.find((repo) => repo.id === repoId)?.fullPath
+
+  useEffect(() => {
+    if (repoPath === undefined) return
+    void queryClient.prefetchQuery(
+      openCodeLocationQueryOptions(repoPath, LOCAL_OPENCODE_SERVER_ID),
+    )
+  }, [queryClient, repoPath])
+}
diff --git a/frontend/src/hooks/useSessionPickerNavigation.ts b/frontend/src/hooks/useSessionPickerNavigation.ts
new file mode 100644
index 000000000..31a2ecb84
--- /dev/null
+++ b/frontend/src/hooks/useSessionPickerNavigation.ts
@@ -0,0 +1,118 @@
+import { useCallback } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import type { Repo, Session } from '@/api/types'
+import {
+  getRepoPath,
+  getServerSessionPath,
+  getSessionListPath,
+  getSessionPath,
+  parseActivePickerSession,
+  parseRepoRoute,
+  withQueryParam,
+} from '@/lib/navigation'
+
+export interface SessionPickerNavigationOptions {
+  /**
+   * `replace` rewrites the entry the mobile sheet was opened from so Back returns to the page behind
+   * it; `push` adds an entry and closes the picker.
+   */
+  mode: 'push' | 'replace'
+  onClose: () => void
+  /** Replaces the default delete behaviour of returning to the current repo's session list. */
+  onDeleteActiveSession?: () => void
+}
+
+export interface SessionPickerNavigation {
+  onSelectSession: (session: Session, repo: Repo) => void
+  onSelectRemoteSession: (session: Session, serverId: string) => void
+  onDeleteActiveSession: () => void
+  onSelectRepo: (repo: Repo) => void
+  onNavigate: (path: string) => void
+}
+
+/**
+ * Builds the session picker handlers shared by the mobile sheet, the desktop dialog and the session
+ * page picker. The route in view comes from the location: choosing the session already open on the
+ * same server only closes the picker, and an assistant session keeps `?assistant=1` when the chosen
+ * session belongs to the current repo.
+ *
+ * @param options Navigation mode, the picker's close callback, and an optional delete override.
+ * @returns Handlers for selecting sessions and repos and for following a prepared path.
+ */
+export function useSessionPickerNavigation({
+  mode,
+  onClose,
+  onDeleteActiveSession: deleteActiveSessionOverride,
+}: SessionPickerNavigationOptions): SessionPickerNavigation {
+  const navigate = useNavigate()
+  const { pathname, search } = useLocation()
+  const currentRepoId = parseRepoRoute(pathname).repoId
+  const { sessionId: activeSessionID, serverId: activeServerId } = parseActivePickerSession(pathname)
+  const searchParams = new URLSearchParams(search)
+  const isAssistantSession = searchParams.get('assistant') === '1'
+  const repoTab = searchParams.get('repoTab') ?? undefined
+
+  const open = useCallback(
+    (path: string) => {
+      navigate(path, { replace: mode === 'replace' })
+      if (mode === 'push') onClose()
+    },
+    [mode, navigate, onClose],
+  )
+
+  const onSelectSession = useCallback(
+    (session: Session, repo: Repo) => {
+      if (session.id === activeSessionID && activeServerId === LOCAL_OPENCODE_SERVER_ID) {
+        onClose()
+        return
+      }
+      const sessionPath = getSessionPath(repo.id, session.id)
+      open(
+        isAssistantSession && repo.id === currentRepoId
+          ? withQueryParam(sessionPath, 'assistant', '1')
+          : sessionPath,
+      )
+    },
+    [activeServerId, activeSessionID, currentRepoId, isAssistantSession, onClose, open],
+  )
+
+  const onSelectRemoteSession = useCallback(
+    (session: Session, serverId: string) => {
+      if (session.id === activeSessionID && serverId === activeServerId) {
+        onClose()
+        return
+      }
+      open(getServerSessionPath(serverId, session.id))
+    },
+    [activeServerId, activeSessionID, onClose, open],
+  )
+
+  const onDeleteActiveSession = useCallback(() => {
+    if (deleteActiveSessionOverride) {
+      onClose()
+      deleteActiveSessionOverride()
+      return
+    }
+    if (currentRepoId === null) {
+      onClose()
+      return
+    }
+    open(getSessionListPath(currentRepoId, isAssistantSession, repoTab))
+  }, [currentRepoId, deleteActiveSessionOverride, isAssistantSession, onClose, open, repoTab])
+
+  const onSelectRepo = useCallback(
+    (repo: Repo) => {
+      open(getRepoPath(repo.id))
+    },
+    [open],
+  )
+
+  return {
+    onSelectSession,
+    onSelectRemoteSession,
+    onDeleteActiveSession,
+    onSelectRepo,
+    onNavigate: open,
+  }
+}
diff --git a/frontend/src/hooks/useSessionPickerRouteScope.test.tsx b/frontend/src/hooks/useSessionPickerRouteScope.test.tsx
new file mode 100644
index 000000000..232535fee
--- /dev/null
+++ b/frontend/src/hooks/useSessionPickerRouteScope.test.tsx
@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import { useSidebarServerStore } from '@/stores/sidebarServerStore'
+import { useSessionPickerRouteScope } from './useSessionPickerRouteScope'
+
+const mocks = vi.hoisted(() => ({
+  getSession: vi.fn(),
+  listProjects: vi.fn(),
+}))
+
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return { ...actual, getSession: mocks.getSession, listProjects: mocks.listProjects }
+})
+
+vi.mock('@/hooks/useOpenCodeServers', () => ({
+  useOpenCodeServers: () => ({
+    servers: [{ id: 'srv_kitchen', name: 'Kitchen', enabled: true }],
+    isLoading: false,
+  }),
+}))
+
+vi.mock('@/hooks/useSidebarRepoGroups', () => ({
+  useNavigableRepos: () => ({ repos: [], isLoading: false, refetch: vi.fn() }),
+}))
+
+function renderScope(entry: string, seed?: (queryClient: QueryClient) => void) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  seed?.(queryClient)
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{children}</MemoryRouter>
+    </QueryClientProvider>
+  )
+  return renderHook(() => useSessionPickerRouteScope(true), { wrapper })
+}
+
+const kitchenProject = {
+  id: 'p1',
+  name: 'App',
+  canonical: '/home/me/app',
+  time: { created: 1, updated: 2 },
+  sandboxes: [],
+}
+
+describe('useSessionPickerRouteScope', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useSidebarServerStore.setState({ serverId: 'srv_kitchen' })
+    mocks.listProjects.mockResolvedValue([])
+  })
+
+  it('resolves a session subdirectory to the canonical directory of its project', async () => {
+    mocks.getSession.mockResolvedValue({
+      id: 'ses_remote',
+      location: { directory: '/home/me/app/packages/web' },
+    })
+    mocks.listProjects.mockResolvedValue([kitchenProject])
+
+    const { result } = renderScope('/servers/srv_kitchen/sessions/ses_remote')
+
+    await waitFor(() => expect(result.current.remote?.projectDirectory).toBe('/home/me/app'))
+    expect(result.current.remote?.isPending).toBe(false)
+    expect(result.current.remote?.serverName).toBe('Kitchen')
+    expect(result.current.activeSessionID).toBe('ses_remote')
+  })
+
+  it('falls back to the session directory when no project owns it', async () => {
+    mocks.getSession.mockResolvedValue({
+      id: 'ses_remote',
+      location: { directory: '/home/me/other' },
+    })
+
+    const { result } = renderScope('/servers/srv_kitchen/sessions/ses_remote')
+
+    await waitFor(() => expect(result.current.remote?.projectDirectory).toBe('/home/me/other'))
+    expect(result.current.remote?.isPending).toBe(false)
+  })
+
+  it('reports the scope as pending while the session directory resolves', async () => {
+    mocks.getSession.mockReturnValue(new Promise(() => undefined))
+
+    const { result } = renderScope('/servers/srv_kitchen/sessions/ses_remote')
+
+    await waitFor(() => expect(result.current.remote?.isPending).toBe(true))
+    expect(result.current.remote?.projectDirectory).toBeUndefined()
+  })
+
+  it('reuses the session the open page already loaded', async () => {
+    mocks.getSession.mockReturnValue(new Promise(() => undefined))
+    mocks.listProjects.mockResolvedValue([kitchenProject])
+
+    const { result } = renderScope('/servers/srv_kitchen/sessions/ses_remote', (queryClient) => {
+      queryClient.setQueryData(
+        ['opencode', 'session', 'ses_remote', '/home/me/app/packages/web', 'srv_kitchen'],
+        { id: 'ses_remote', location: { directory: '/home/me/app/packages/web' } },
+      )
+    })
+
+    await waitFor(() => expect(result.current.remote?.projectDirectory).toBe('/home/me/app'))
+    expect(result.current.remote?.isPending).toBe(false)
+    expect(mocks.getSession).not.toHaveBeenCalled()
+  })
+
+  it('scopes to the whole server on a route without a session', () => {
+    const { result } = renderScope('/')
+
+    expect(result.current.remote?.projectDirectory).toBeUndefined()
+    expect(result.current.remote?.isPending).toBe(false)
+    expect(result.current.activeSessionID).toBeUndefined()
+  })
+
+  it('resolves no linked-server scope for the local server', () => {
+    useSidebarServerStore.setState({ serverId: LOCAL_OPENCODE_SERVER_ID })
+
+    const { result } = renderScope('/repos/5/sessions/ses_local')
+
+    expect(result.current.remote).toBeUndefined()
+    expect(mocks.getSession).not.toHaveBeenCalled()
+    expect(mocks.listProjects).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/hooks/useSessionPickerRouteScope.ts b/frontend/src/hooks/useSessionPickerRouteScope.ts
new file mode 100644
index 000000000..81dc07260
--- /dev/null
+++ b/frontend/src/hooks/useSessionPickerRouteScope.ts
@@ -0,0 +1,45 @@
+import { useLocation } from 'react-router-dom'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import type { Repo } from '@/api/types'
+import type { RemotePickerScope } from '@/components/session/SessionPickerDialog'
+import { parseActivePickerSession, parseRepoRoute } from '@/lib/navigation'
+import { useNavigableRepos } from '@/hooks/useSidebarRepoGroups'
+import { useOpenCodeServers } from '@/hooks/useOpenCodeServers'
+import { useSidebarServerSelection } from '@/hooks/useSidebarServerSelection'
+import { useActiveRemoteDirectory } from '@/hooks/useActiveRemoteDirectory'
+
+export interface SessionPickerRouteScope {
+  currentRepo: Repo | undefined
+  activeSessionID: string | undefined
+  remote: RemotePickerScope | undefined
+}
+
+export function useSessionPickerRouteScope(enabled: boolean): SessionPickerRouteScope {
+  const { pathname } = useLocation()
+  const [selectedServerId] = useSidebarServerSelection()
+  const { repos } = useNavigableRepos(enabled)
+  const { servers } = useOpenCodeServers({ enabled })
+  const activeRemoteDirectory = useActiveRemoteDirectory(selectedServerId, { enabled })
+
+  const isRemote = selectedServerId !== LOCAL_OPENCODE_SERVER_ID
+  const repoRoute = parseRepoRoute(pathname)
+  const currentRepo = isRemote || repoRoute.repoId === null
+    ? undefined
+    : repos.find((candidate) => candidate.id === repoRoute.repoId)
+  const activeSessionID = parseActivePickerSession(pathname).sessionId
+
+  if (!isRemote) {
+    return { currentRepo, activeSessionID, remote: undefined }
+  }
+
+  return {
+    currentRepo,
+    activeSessionID,
+    remote: {
+      serverId: selectedServerId,
+      serverName: servers.find((server) => server.id === selectedServerId)?.name,
+      projectDirectory: activeRemoteDirectory.directory ?? undefined,
+      isPending: activeRemoteDirectory.isPending,
+    },
+  }
+}
diff --git a/frontend/src/hooks/useSessionTranscript.test.tsx b/frontend/src/hooks/useSessionTranscript.test.tsx
index b88435a43..e8d7e63d5 100644
--- a/frontend/src/hooks/useSessionTranscript.test.tsx
+++ b/frontend/src/hooks/useSessionTranscript.test.tsx
@@ -8,7 +8,7 @@ import type {
   V2Event,
 } from '@opencode-manager/shared/opencode'
 import { useSessionTranscript } from './useSessionTranscript'
-import { ContextUsageIndicator } from '@/components/session/ContextUsageIndicator'
+import { useContextUsage } from './useContextUsage'
 import { OpenCodeServerProvider } from '@/contexts/OpenCodeServerContext'
 import { applySessionEvent, emptySessionTranscript } from '@/lib/session-projection'
 import type { TranscriptCache } from '@/lib/session-projection'
@@ -1129,13 +1129,8 @@ describe('useSessionTranscript', () => {
     function PageConsumers() {
       const { messages } = useSessionTranscript(SESSION_ID, DIRECTORY)
       pageMessages.current = messages
-      return (
-        <ContextUsageIndicator
-          directory={DIRECTORY}
-          sessionID={SESSION_ID}
-          isConnected
-        />
-      )
+      useContextUsage(SESSION_ID, DIRECTORY)
+      return null
     }
 
     render(<PageConsumers />, { wrapper: createWrapper(queryClient) })
diff --git a/frontend/src/hooks/useSettingsDialog.test.tsx b/frontend/src/hooks/useSettingsDialog.test.tsx
index 3178eb2ce..ef08ad8f3 100644
--- a/frontend/src/hooks/useSettingsDialog.test.tsx
+++ b/frontend/src/hooks/useSettingsDialog.test.tsx
@@ -270,7 +270,7 @@ describe('useSettingsDialog', () => {
       }
 
       render(
-        <MemoryRouter initialEntries={['/?mobileTab=repos']}>
+        <MemoryRouter initialEntries={['/?mobileTab=sessions']}>
           <Harness />
         </MemoryRouter>,
       )
@@ -285,7 +285,7 @@ describe('useSettingsDialog', () => {
 
       act(() => { screen.getByText('back').click() })
 
-      expect(screen.getByTestId('search').textContent).toBe('?mobileTab=repos')
+      expect(screen.getByTestId('search').textContent).toBe('?mobileTab=sessions')
       expect(screen.getByTestId('dialog-state').textContent).toBe('closed')
     })
 
diff --git a/frontend/src/hooks/useVcsInfo.test.tsx b/frontend/src/hooks/useVcsInfo.test.tsx
new file mode 100644
index 000000000..538b111af
--- /dev/null
+++ b/frontend/src/hooks/useVcsInfo.test.tsx
@@ -0,0 +1,62 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useVcsInfo } from './useVcsInfo'
+
+const mocks = vi.hoisted(() => ({ getVcsInfo: vi.fn() }))
+
+vi.mock('@/api/opencode', () => ({ getVcsInfo: mocks.getVcsInfo }))
+
+function createWrapper() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+describe('useVcsInfo', () => {
+  beforeEach(() => {
+    mocks.getVcsInfo.mockReset()
+    mocks.getVcsInfo.mockResolvedValue({
+      branch: { current: 'feat/header', default: 'main' },
+    })
+  })
+
+  it('reads the branch of the directory from the given server', async () => {
+    const { result } = renderHook(() => useVcsInfo('/abs/repo', 'srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => expect(result.current.data?.branch.current).toBe('feat/header'))
+    expect(mocks.getVcsInfo).toHaveBeenCalledWith('/abs/repo', 'srv_kitchen')
+  })
+
+  it('stays disabled without a directory', () => {
+    const { result } = renderHook(() => useVcsInfo(undefined, 'srv_kitchen'), {
+      wrapper: createWrapper(),
+    })
+
+    expect(result.current.fetchStatus).toBe('idle')
+    expect(mocks.getVcsInfo).not.toHaveBeenCalled()
+  })
+
+  it('stays disabled when the caller disables it', () => {
+    renderHook(() => useVcsInfo('/abs/repo', 'srv_kitchen', { enabled: false }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(mocks.getVcsInfo).not.toHaveBeenCalled()
+  })
+
+  it('shares one cache entry between callers of the same directory and server', async () => {
+    const wrapper = createWrapper()
+    const first = renderHook(() => useVcsInfo('/abs/repo', 'srv_kitchen'), { wrapper })
+    const second = renderHook(() => useVcsInfo('/abs/repo', 'srv_kitchen'), { wrapper })
+
+    await waitFor(() => expect(first.result.current.data?.branch.current).toBe('feat/header'))
+    await waitFor(() => expect(second.result.current.data?.branch.current).toBe('feat/header'))
+
+    expect(mocks.getVcsInfo).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/frontend/src/hooks/useVcsInfo.ts b/frontend/src/hooks/useVcsInfo.ts
new file mode 100644
index 000000000..b1d27ce74
--- /dev/null
+++ b/frontend/src/hooks/useVcsInfo.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import { getVcsInfo } from '@/api/opencode'
+import { vcsInfoQueryKey } from '@/lib/queryInvalidation'
+
+export interface UseVcsInfoOptions {
+  enabled?: boolean
+}
+
+export function useVcsInfo(
+  directory: string | undefined,
+  serverId: string | undefined,
+  options: UseVcsInfoOptions = {},
+) {
+  const { enabled = true } = options
+
+  return useQuery({
+    queryKey: vcsInfoQueryKey(directory, serverId),
+    queryFn: () => getVcsInfo(directory ?? '', serverId),
+    enabled: enabled && Boolean(directory),
+    staleTime: 30_000,
+    retry: false,
+  })
+}
diff --git a/frontend/src/lib/contextUsage.test.ts b/frontend/src/lib/contextUsage.test.ts
new file mode 100644
index 000000000..ce81d5bb8
--- /dev/null
+++ b/frontend/src/lib/contextUsage.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import {
+  contextUsageAccessibleLabel,
+  contextUsageTone,
+  formatCompactTokens,
+  formatContextUsage,
+} from './contextUsage'
+
+describe('contextUsageTone', () => {
+  it('keeps usage below 50 percent in the success tone', () => {
+    expect(contextUsageTone(0)).toBe('success')
+    expect(contextUsageTone(49)).toBe('success')
+  })
+
+  it('moves to warning from 50 percent and destructive from 80 percent', () => {
+    expect(contextUsageTone(50)).toBe('warning')
+    expect(contextUsageTone(79)).toBe('warning')
+    expect(contextUsageTone(80)).toBe('destructive')
+    expect(contextUsageTone(140)).toBe('destructive')
+  })
+
+  it('treats an unknown percentage as success', () => {
+    expect(contextUsageTone(null)).toBe('success')
+  })
+})
+
+describe('formatCompactTokens', () => {
+  it('prints exact counts below a thousand', () => {
+    expect(formatCompactTokens(999)).toBe('999')
+  })
+
+  it('abbreviates thousands and millions', () => {
+    expect(formatCompactTokens(12000)).toBe('12k')
+    expect(formatCompactTokens(999999)).toBe('1M')
+    expect(formatCompactTokens(1300000)).toBe('1.3M')
+  })
+})
+
+describe('formatContextUsage', () => {
+  it('prefers the percentage when the limit is known', () => {
+    expect(formatContextUsage({ totalTokens: 84000, usagePercentage: 42, contextLimit: 200000 })).toBe('42%')
+  })
+
+  it('falls back to compact tokens without a limit', () => {
+    expect(formatContextUsage({ totalTokens: 12400, usagePercentage: null, contextLimit: null })).toBe('12k')
+  })
+})
+
+describe('contextUsageAccessibleLabel', () => {
+  it('announces the percentage when the limit is known', () => {
+    expect(contextUsageAccessibleLabel({ totalTokens: 84000, usagePercentage: 42, contextLimit: 200000 }))
+      .toBe('context 42% used')
+  })
+
+  it('announces compact tokens without a limit', () => {
+    expect(contextUsageAccessibleLabel({ totalTokens: 12400, usagePercentage: null, contextLimit: null }))
+      .toBe('context 12k tokens used')
+  })
+})
diff --git a/frontend/src/lib/contextUsage.ts b/frontend/src/lib/contextUsage.ts
new file mode 100644
index 000000000..9a0bf04e7
--- /dev/null
+++ b/frontend/src/lib/contextUsage.ts
@@ -0,0 +1,48 @@
+export interface ContextUsage {
+  totalTokens: number
+  usagePercentage: number | null
+  contextLimit: number | null
+}
+
+export type ContextUsageTone = 'success' | 'warning' | 'destructive'
+
+export const CONTEXT_USAGE_TEXT_CLASS: Record<ContextUsageTone, string> = {
+  success: 'text-success',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+}
+
+export const CONTEXT_USAGE_BG_CLASS: Record<ContextUsageTone, string> = {
+  success: 'bg-success',
+  warning: 'bg-warning',
+  destructive: 'bg-destructive',
+}
+
+export function contextUsageTone(percentage: number | null): ContextUsageTone {
+  if (percentage === null || percentage < 50) return 'success'
+  if (percentage < 80) return 'warning'
+  return 'destructive'
+}
+
+export function formatCompactTokens(tokens: number): string {
+  if (tokens < 1000) return String(tokens)
+  if (tokens < 1000000) {
+    const thousands = Math.round(tokens / 1000)
+    if (thousands < 1000) return `${thousands}k`
+  }
+  return `${Number((tokens / 1000000).toFixed(1))}M`
+}
+
+export function formatContextUsage(usage: ContextUsage): string {
+  if (usage.contextLimit !== null && usage.usagePercentage !== null) {
+    return `${usage.usagePercentage}%`
+  }
+  return formatCompactTokens(usage.totalTokens)
+}
+
+export function contextUsageAccessibleLabel(usage: ContextUsage): string {
+  if (usage.usagePercentage !== null) {
+    return `context ${usage.usagePercentage}% used`
+  }
+  return `context ${formatCompactTokens(usage.totalTokens)} tokens used`
+}
diff --git a/frontend/src/lib/navigation.test.ts b/frontend/src/lib/navigation.test.ts
index 1cb0940a6..dc0d64c2f 100644
--- a/frontend/src/lib/navigation.test.ts
+++ b/frontend/src/lib/navigation.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { getSessionListPath, getSwipeBackTarget, getAssistantPath, getAssistantSessionListPath, isAssistantPath, getPathWithReturnTo, getReturnToPath, getRepoPath, getServerProjectPath, getServerSessionPath, getSessionPath, isSessionDetailRoute, parseRepoRoute, parseServerProjectRoute, parseServerSessionRoute } from './navigation';
+import { getSessionListPath, getSwipeBackTarget, getAssistantPath, getAssistantSessionListPath, isAssistantPath, getPathWithReturnTo, getReturnToPath, getRepoPath, getServerProjectPath, getServerSessionPath, getSessionPath, isSessionDetailRoute, parseActivePickerSession, parseRepoRoute, parseServerProjectRoute, parseServerSessionRoute } from './navigation';
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas';
 
 describe('getAssistantPath', () => {
   it('returns /assistant', () => {
@@ -191,6 +192,27 @@ describe('parseServerSessionRoute', () => {
   });
 });
 
+describe('parseActivePickerSession', () => {
+  it('reads a local session route on the local server', () => {
+    expect(parseActivePickerSession('/repos/5/sessions/ses_1')).toEqual({
+      sessionId: 'ses_1',
+      serverId: LOCAL_OPENCODE_SERVER_ID,
+    });
+  });
+
+  it('reads a linked-server session route on its own server', () => {
+    expect(parseActivePickerSession('/servers/srv_kitchen/sessions/ses_1')).toEqual({
+      sessionId: 'ses_1',
+      serverId: 'srv_kitchen',
+    });
+  });
+
+  it('returns no session outside a session route', () => {
+    expect(parseActivePickerSession('/repos/5')).toEqual({});
+    expect(parseActivePickerSession('/servers/srv_kitchen/projects')).toEqual({});
+  });
+});
+
 describe('return target helpers', () => {
   it('adds encoded returnTo params for internal paths', () => {
     expect(getPathWithReturnTo('/repos/5/schedules', '/repos/5/sessions/abc?assistant=1')).toBe(
diff --git a/frontend/src/lib/navigation.ts b/frontend/src/lib/navigation.ts
index 20aeb54fd..9226190cd 100644
--- a/frontend/src/lib/navigation.ts
+++ b/frontend/src/lib/navigation.ts
@@ -65,6 +65,22 @@ export function parseServerSessionRoute(pathname: string): { serverId: string; s
   return { serverId, sessionId };
 }
 
+/**
+ * Reads the session route in view, whether it belongs to the local server or a linked one.
+ *
+ * @param pathname Pathname of the location to read.
+ * @returns The routed session and its server; both are omitted when the location is not a session route.
+ */
+export function parseActivePickerSession(pathname: string): { sessionId?: string; serverId?: string } {
+  const repoRoute = parseRepoRoute(pathname);
+  if (repoRoute.sessionId) {
+    return { sessionId: repoRoute.sessionId, serverId: LOCAL_OPENCODE_SERVER_ID };
+  }
+  const serverSessionRoute = parseServerSessionRoute(pathname);
+  if (!serverSessionRoute) return {};
+  return { sessionId: serverSessionRoute.sessionId, serverId: serverSessionRoute.serverId };
+}
+
 export function isSessionDetailRoute(pathname: string): boolean {
   const normalizedPathname = pathname.replace(/\/+$/, '');
   return /^\/repos\/[^/]+\/sessions\/[^/]+$/.test(normalizedPathname) || parseServerSessionRoute(normalizedPathname) !== null;
diff --git a/frontend/src/lib/openCodeLocation.ts b/frontend/src/lib/openCodeLocation.ts
new file mode 100644
index 000000000..cc1e24172
--- /dev/null
+++ b/frontend/src/lib/openCodeLocation.ts
@@ -0,0 +1,19 @@
+import { queryOptions } from '@tanstack/react-query'
+import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import { getOpenCodeLocation } from '@/api/opencode'
+import { serverScopedKey } from '@/lib/serverScope'
+
+/**
+ * Query options for a repo directory's OpenCode project location, shared by the session picker and
+ * the route-level prefetch so both read and write the same cache entry.
+ */
+export function openCodeLocationQueryOptions(
+  fullPath: string,
+  serverId: string = LOCAL_OPENCODE_SERVER_ID,
+) {
+  return queryOptions({
+    queryKey: serverScopedKey(['opencode', 'location', fullPath], serverId),
+    queryFn: () => getOpenCodeLocation(fullPath, serverId),
+    staleTime: 5 * 60 * 1000,
+  })
+}
diff --git a/frontend/src/lib/queryInvalidation.ts b/frontend/src/lib/queryInvalidation.ts
index 501666c5d..764bb3232 100644
--- a/frontend/src/lib/queryInvalidation.ts
+++ b/frontend/src/lib/queryInvalidation.ts
@@ -1,5 +1,6 @@
 import type { QueryClient } from '@tanstack/react-query'
 import { LOCAL_OPENCODE_SERVER_ID } from '@opencode-manager/shared/schemas'
+import { serverScopedKey } from '@/lib/serverScope'
 import type { GitStatusResponse } from '@/types/git'
 
 export function sessionTranscriptQueryKey(sessionID: string | null | undefined) {
@@ -14,6 +15,36 @@ export function invalidateShellCaches(queryClient: QueryClient) {
   queryClient.invalidateQueries({ queryKey: ['opencode', 'shells'] })
 }
 
+/**
+ * Query key of the VCS info cached for one directory on one server.
+ *
+ * @param directory Directory the info describes; a missing directory keeps the placeholder key.
+ * @param serverId Server that owns the directory; defaults to the local one.
+ */
+export function vcsInfoQueryKey(
+  directory: string | null | undefined,
+  serverId: string = LOCAL_OPENCODE_SERVER_ID,
+) {
+  return [...serverScopedKey(['opencode', 'vcs', directory ?? ''], serverId), 'info']
+}
+
+/**
+ * Invalidates the VCS info of one directory so a branch change reaches every surface that shows the
+ * branch, while the status and diff caches of the same directory stay untouched.
+ *
+ * @param queryClient Client that owns the cache.
+ * @param directory Directory whose info is invalidated; a missing directory is ignored.
+ * @param serverId Server that owns the directory; defaults to the local one.
+ */
+export function invalidateVcsInfoCache(
+  queryClient: QueryClient,
+  directory: string | null | undefined,
+  serverId: string = LOCAL_OPENCODE_SERVER_ID,
+) {
+  if (!directory) return
+  queryClient.invalidateQueries({ queryKey: vcsInfoQueryKey(directory, serverId), exact: true })
+}
+
 export function childSessionReconciliationQueryKey(sessionID: string | null | undefined) {
   return ['opencode', 'session-reconcile', sessionID]
 }
diff --git a/frontend/src/pages/RemoteProject.tsx b/frontend/src/pages/RemoteProject.tsx
index 9b4e2b386..c172d1e39 100644
--- a/frontend/src/pages/RemoteProject.tsx
+++ b/frontend/src/pages/RemoteProject.tsx
@@ -1,8 +1,9 @@
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
 import { FolderGit2, GitBranch, Loader2, Plus, Server } from 'lucide-react'
-import { getVcsInfo, listProjects } from '@/api/opencode'
+import { remoteProjectName } from '@/api/opencode'
 import { useCreateSession } from '@/hooks/useOpenCode'
+import { useRemoteProjects } from '@/hooks/useRemoteProjects'
+import { useVcsInfo } from '@/hooks/useVcsInfo'
 import { useOpenCodeServers } from '@/hooks/useOpenCodeServers'
 import { useSettingsDialog } from '@/hooks/useSettingsDialog'
 import { useSSE } from '@/hooks/useSSE'
@@ -10,7 +11,6 @@ import { useToolPanelLayout } from '@/hooks/useToolPanelLayout'
 import { useToolPanel } from '@/hooks/useToolPanel'
 import { useDialogParam } from '@/hooks/useDialogParam'
 import { useTerminalDialogParam, useTerminalDirectoryParam } from '@/hooks/useOpenTerminal'
-import { serverScopedKey } from '@/lib/serverScope'
 import { getServerSessionPath } from '@/lib/navigation'
 import { getDirectoryName } from '@/lib/utils'
 import { Header } from '@/components/ui/header'
@@ -43,25 +43,19 @@ function RemoteProjectContent({ serverId, directory }: { serverId: string; direc
   const isReady = server?.enabled === true && Boolean(directory)
   const createSession = useCreateSession(directory)
 
-  const projectsQuery = useQuery({
-    queryKey: serverScopedKey(['opencode', 'projects'], serverId),
-    queryFn: () => listProjects(serverId),
-    enabled: server?.enabled === true,
-    retry: false,
-  })
+  const { projects } = useRemoteProjects(serverId)
 
-  const vcsQuery = useQuery({
-    queryKey: [...serverScopedKey(['opencode', 'vcs', directory ?? ''], serverId), 'info'],
-    queryFn: () => getVcsInfo(directory ?? '', serverId),
-    enabled: isReady,
-    retry: false,
-  })
+  const vcsQuery = useVcsInfo(directory, serverId, { enabled: isReady })
 
   useSSE(directory)
 
-  const project = (projectsQuery.data ?? []).find((entry) => entry.canonical === directory)
+  const project = projects.find((entry) => entry.canonical === directory)
   const branch = vcsQuery.data?.branch.current ?? vcsQuery.data?.branch.default
-  const title = project?.name?.trim() || (directory ? getDirectoryName(directory) : 'Project')
+  const title = project
+    ? remoteProjectName(project)
+    : directory
+      ? getDirectoryName(directory)
+      : 'Project'
 
   const openSettings = () => openTab('servers')
 
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index 25f9b8bb1..8ee72d4bf 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -5,24 +5,23 @@ import { repoQueryOptions } from "@/lib/repoQuery";
 import { MessageThread } from "@/components/message/MessageThread";
 import { PromptInput, type PromptInputHandle } from "@/components/message/PromptInput";
 import { FloatingTTSButton } from '@/components/message/FloatingTTSButton'
-import { X, CornerUpLeft, GitBranch, ArrowDown } from "lucide-react";
+import { X, CornerUpLeft, GitBranch, ArrowDown, Server } from "lucide-react";
 import { SquareFill } from "@/components/ui/square-fill";
 import { Header } from "@/components/ui/header";
 import { Badge } from "@/components/ui/badge";
 import { SessionPickerDialog } from "@/components/session/SessionPickerDialog";
-import { getRepoPath, getServerProjectPath, getServerSessionPath, getSessionListPath, getSessionPath } from '@/lib/navigation'
+import { getServerProjectPath, getSessionListPath, getSessionPath } from '@/lib/navigation'
 import { FetchError } from '@/api/fetchWrapper'
 
 import { FileBrowserSheet } from "@/components/file-browser/FileBrowserSheet";
-import { Button } from "@/components/ui/button";
 import { NotFoundState } from "@/components/ui/not-found-state";
-import { ContextUsageIndicator } from "@/components/session/ContextUsageIndicator";
 import { useSession, useInterruptSession, useUpdateSession, useCreateSession } from "@/hooks/useOpenCode";
 import { useSessionTranscript } from "@/hooks/useSessionTranscript";
 import { useAutoOpenWalkthrough } from "@/hooks/useAutoOpenWalkthrough";
 import { useRepoActivity } from "@/hooks/useRepoActivity";
 import { useRepoSiblings } from "@/hooks/useRepoSiblings";
 import { useSSE } from "@/hooks/useSSE";
+import { useVcsInfo } from "@/hooks/useVcsInfo";
 import { useUIState } from "@/stores/uiStateStore";
 import { useSettings } from "@/hooks/useSettings";
 import { useModelSelection } from "@/hooks/useModelSelection";
@@ -30,6 +29,7 @@ import { useShortcutActions } from "@/contexts/KeyboardShortcutsContext";
 import { useSettingsDialog } from "@/hooks/useSettingsDialog";
 import { useAutoScroll } from "@/hooks/useAutoScroll";
 import { useMobile } from "@/hooks/useMobile";
+import { useMobileTabBar } from "@/hooks/useMobileTabBar";
 import { useToolPanelLayout } from "@/hooks/useToolPanelLayout";
 import { useVisualViewport } from "@/hooks/useVisualViewport";
 import { useTTS } from "@/hooks/useTTS";
@@ -49,8 +49,9 @@ import { ProjectActionsMenu } from "@/components/repo/ProjectActionsMenu";
 import { RepoActionsDialog } from "@/components/repo/RepoActionsDialog";
 import { ResetPermissionsDialog } from "@/components/repo/ResetPermissionsDialog";
 import { RepoSkillsDialog } from "@/components/repo/RepoSkillsDialog";
-import { compactSession, forkSession, listProjects, listSessionMessages } from "@/api/opencode";
+import { compactSession, findRemoteProjectForDirectory, forkSession, listSessionMessages, remoteProjectName } from "@/api/opencode";
 import { useOpenCodeServerId, isLocalOpenCodeServer } from "@/contexts/OpenCodeServerContext";
+import { useRemoteProjects } from "@/hooks/useRemoteProjects";
 import { useSwipeNavigation } from "@/contexts/SwipeNavigationContext";
 import { useOpenCodeServers, useOpenCodeServerStatuses } from "@/hooks/useOpenCodeServers";
 import { serverScopedKey } from "@/lib/serverScope";
@@ -70,6 +71,8 @@ import { SourceControlPanel, RemoteSourceControlPanel } from "@/components/sourc
 import { TerminalPanel } from "@/components/terminal/TerminalPanel";
 import { PreviewPanel } from "@/components/preview/PreviewPanel";
 import { SessionSendErrorBanner } from "@/components/session/SessionSendErrorBanner";
+import { ReconnectingBanner } from "@/components/session/ReconnectingBanner";
+import { SessionDetailsSheet } from "@/components/session/SessionDetailsSheet";
 import { BackgroundWorkBar } from "@/components/session/BackgroundWorkBar";
 import { SessionGoalBar } from "@/components/session/SessionGoalBar";
 import { useDialogParam } from "@/hooks/useDialogParam";
@@ -81,6 +84,7 @@ import { ChangesWalkthroughSheet, type WalkthroughSourceRequest } from "@/compon
 import { ToolSidePanel } from "@/components/navigation/ToolSidePanel";
 import type { WalkthroughSource } from "@opencode-manager/shared/schemas";
 import { useToolPanel } from "@/hooks/useToolPanel";
+import { useSessionPickerNavigation } from "@/hooks/useSessionPickerNavigation";
 
 const OLDER_HISTORY_SCROLL_THRESHOLD_PX = 200
 
@@ -134,6 +138,7 @@ export function SessionDetail() {
   const [messageContainer, setMessageContainer] = useState<HTMLDivElement | null>(null);
   const promptInputRef = useRef<PromptInputHandle>(null);
   const [sessionsDialogOpen, setSessionsDialogOpen] = useState(false);
+  const [sessionDetailsOpen, setSessionDetailsOpen] = useState(false);
   const [fileBrowserOpen, setFileBrowserOpen] = useDialogParam('files');
   const [mcpDialogOpen, setMcpDialogOpen] = useDialogParam('mcp');
   const [skillsDialogOpen, setSkillsDialogOpen] = useDialogParam('skills');
@@ -156,6 +161,7 @@ export function SessionDetail() {
   const [forkPickerLoading, setForkPickerLoading] = useState(false);
 
   const isMobile = useMobile();
+  const { open: openMobileSheet } = useMobileTabBar();
   const { docked, showRail } = useToolPanelLayout();
   const sidePanel = useToolPanel(showRail);
   const { keyboardHeight } = useVisualViewport();
@@ -187,8 +193,6 @@ export function SessionDetail() {
 
   useRepoActivity(repoId, Boolean(repo) && !isRemoteServer);
 
-  const sessionRouteSuffix = isAssistantSession && !isRemoteServer ? '?assistant=1' : '';
-
   const repoDirectory = repo?.fullPath;
   const [resolvedSessionDirectory, setResolvedSessionDirectory] = useState<{ sessionId: string; directory: string } | null>(null);
   const resolvedDirectory = (
@@ -213,26 +217,27 @@ export function SessionDetail() {
 
   const { servers: linkedServers } = useOpenCodeServers({ enabled: isRemoteServer });
 
-  const { data: remoteProjects } = useQuery({
-    queryKey: serverScopedKey(['opencode', 'projects'], serverId),
-    queryFn: () => listProjects(serverId),
-    enabled: isRemoteServer,
-    retry: false,
-  });
+  const { projects: remoteProjects } = useRemoteProjects(serverId, { enabled: isRemoteServer });
 
-  const remoteProjectDirectory = useMemo(() => {
+  const remoteProject = useMemo(() => {
     if (!isRemoteServer || !sessionDirectory) return undefined;
-    const project = remoteProjects?.find(
-      (entry) => sessionDirectory === entry.canonical || sessionDirectory.startsWith(`${entry.canonical}/`),
-    );
-    return project?.canonical ?? sessionDirectory;
+    return findRemoteProjectForDirectory(remoteProjects, sessionDirectory);
   }, [isRemoteServer, remoteProjects, sessionDirectory]);
 
+  const remoteProjectDirectory = isRemoteServer && sessionDirectory
+    ? remoteProject?.canonical ?? sessionDirectory
+    : undefined;
+
+  const remoteProjectDisplayName = remoteProject ? remoteProjectName(remoteProject) : undefined;
+
   const sessionBranch = useMemo(
     () => (repo && !isAssistantSession ? resolveSessionBranch(repo, sessionDirectory, repoSiblings) : null),
     [repo, isAssistantSession, sessionDirectory, repoSiblings],
   );
 
+  const { data: remoteVcsInfo } = useVcsInfo(sessionDirectory, serverId, { enabled: isRemoteServer });
+  const headerBranch = isRemoteServer ? remoteVcsInfo?.branch.current ?? null : sessionBranch;
+
   const { data: session, isLoading: sessionLoading, error: sessionQueryError } = useSession(
     sessionId,
     sessionDirectory,
@@ -368,7 +373,13 @@ export function SessionDetail() {
     enabled: !isVoiceConversationActive,
   });
 
-  const handleShowSessionsDialog = useCallback(() => setSessionsDialogOpen(true), []);
+  const handleShowSessionsDialog = useCallback(() => {
+    if (isMobile) {
+      openMobileSheet('sessions');
+      return;
+    }
+    setSessionsDialogOpen(true);
+  }, [isMobile, openMobileSheet]);
   const handleShowMcpDialog = useCallback(() => setMcpDialogOpen(true), [setMcpDialogOpen]);
   const handleShowSkillsDialog = useCallback(() => setSkillsDialogOpen(true), [setSkillsDialogOpen]);
   const handleShowWalkthrough = useCallback((source?: WalkthroughSource) => {
@@ -539,6 +550,12 @@ export function SessionDetail() {
     navigate(getSessionListPath(repoId, isAssistantSession, tab))
   }, [navigate, repoId, isAssistantSession, isRemoteServer, remoteProjectBackPath, location.search])
 
+  const pickerNavigation = useSessionPickerNavigation({
+    mode: 'push',
+    onClose: () => setSessionsDialogOpen(false),
+    onDeleteActiveSession: isRemoteServer ? handleCloseSession : undefined,
+  })
+
   const handleOpenModelDialog = useCallback(() => {
     promptInputRef.current?.openModelPicker();
   }, [])
@@ -558,18 +575,22 @@ export function SessionDetail() {
     setFileBrowserOpen(true)
   }, [repo?.fullPath, repo?.localPath, sessionDirectory, setFileBrowserOpen]);
 
+  const renameSession = useCallback(async (title: string) => {
+    if (!sessionId) throw new Error('No active session');
+    await updateSessionAsync({ sessionID: sessionId, title: title.trim() });
+  }, [sessionId, updateSessionAsync]);
+
   const handleRenameSession = useCallback(async (title: string) => {
-    if (!sessionId) return;
     const trimmedTitle = title.trim();
     try {
-      await updateSessionAsync({ sessionID: sessionId, title: trimmedTitle });
+      await renameSession(title);
       if (!trimmedTitle) {
         showToast.success('Session title regenerated');
       }
     } catch (error) {
       showToast.error(`Rename failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
-  }, [sessionId, updateSessionAsync]);
+  }, [renameSession]);
 
   const handleFileBrowserClose = useCallback(() => setFileBrowserOpen(false), [setFileBrowserOpen]);
 
@@ -777,10 +798,8 @@ export function SessionDetail() {
   }
 
   const linkedServer = linkedServers.find((candidate) => candidate.id === serverId);
-  const workspaceDisplayName = isRemoteServer
-    ? [linkedServer?.name ?? 'Linked server', sessionDirectory ? getDirectoryName(sessionDirectory) : undefined]
-        .filter(Boolean)
-        .join(' · ')
+  const projectDisplayName = isRemoteServer
+    ? remoteProjectDisplayName ?? (sessionDirectory ? getDirectoryName(sessionDirectory) : 'Project')
     : isAssistantSession || !repo
       ? 'Assistant'
       : getRepoDisplayName(repo);
@@ -799,51 +818,54 @@ export function SessionDetail() {
       >
         <Header className="bg-background [&_button]:bg-background [&_button]:text-foreground [&_button]:border-border [&_button:hover]:bg-accent">
           <div className="flex items-center gap-1.5 sm:gap-3 min-w-0 flex-1">
-            {session?.parentID ? (
-              <>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleParentSessionClick}
-                  className="text-primary hover:text-primary-hover hover:bg-primary/10 h-7 px-2 gap-1"
-                  title="Back to parent session"
+            <Header.BackButton to={sessionBackPath} className="text-xs sm:text-sm" />
+            <div className="min-w-0 flex-1">
+              <h1 className="min-w-0 max-w-full text-xs sm:text-base font-semibold">
+                <button
+                  type="button"
+                  onClick={() => setSessionDetailsOpen(true)}
+                  aria-label={`Session details: ${session?.title || "Untitled Session"}`}
+                  className="block min-w-0 max-w-full cursor-pointer text-left"
                 >
-                  <CornerUpLeft className="w-3.5 h-3.5" />
-                  <span className="hidden sm:inline text-xs">Parent</span>
-                </Button>
-                <div className="hidden sm:block">
-                  <Header.BackButton to={sessionBackPath} className="text-xs sm:text-sm" />
-                </div>
-              </>
-            ) : (
-              <Header.BackButton to={sessionBackPath} className="text-xs sm:text-sm" />
-            )}
-            <Header.EditableTitle
-              value={session?.title || "Untitled Session"}
-              onChange={handleRenameSession}
-              subtitle={
-                <span className="text-highlight">
-                  {isRemoteServer ? (
-                    <>
-                      <span className="text-info">{linkedServer?.name ?? 'Linked server'}</span>
-                      {sessionDirectory && ` · ${getDirectoryName(sessionDirectory)}`}
-                    </>
-                  ) : (
-                    workspaceDisplayName
+                  <span className="block truncate bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent transition-opacity hover:opacity-80">
+                    {session?.title || "Untitled Session"}
+                  </span>
+                </button>
+              </h1>
+              {session?.parentID ? (
+                <button
+                  type="button"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleParentSessionClick();
+                  }}
+                  aria-label="Parent session"
+                  className="mt-0.5 inline-flex max-w-full items-center gap-1 rounded-full border border-info/40 px-2 py-0.5 text-[10px] sm:text-xs text-info transition-colors hover:bg-info/10"
+                >
+                  <CornerUpLeft className="h-3 w-3 shrink-0" />
+                  <span className="truncate">Parent session</span>
+                </button>
+              ) : (
+                <p className="flex min-w-0 items-center gap-1 text-[10px] sm:text-xs text-muted-foreground">
+                  {isRemoteServer && (
+                    <Server aria-label="Remote server" className="h-3 w-3 shrink-0 text-highlight" />
                   )}
-                  {sessionBranch && <span className="font-mono sm:hidden"> · {sessionBranch}</span>}
-                </span>
-              }
-            />
-            {sessionBranch && (
+                  <span className="truncate text-highlight">{projectDisplayName}</span>
+                  {headerBranch && (
+                    <span className="truncate font-mono sm:hidden"> · {headerBranch}</span>
+                  )}
+                </p>
+              )}
+            </div>
+            {headerBranch && (
               <Badge
                 variant="outline"
                 data-testid="session-branch"
-                title={`Branch: ${sessionBranch}`}
+                title={`Branch: ${headerBranch}`}
                 className="hidden sm:inline-flex max-w-44 shrink-0 items-center gap-1 border-border bg-card px-2 font-mono text-[11px] font-normal text-muted-foreground"
               >
                 <GitBranch className="h-3 w-3 shrink-0" />
-                <span className="truncate">{sessionBranch}</span>
+                <span className="truncate">{headerBranch}</span>
               </Badge>
             )}
           </div>
@@ -854,17 +876,10 @@ export function SessionDetail() {
               )}
               <PendingActionsGroup showScheduleReports={!isRemoteServer} />
             </div>
-            <ContextUsageIndicator
-              directory={sessionDirectory}
-              sessionID={sessionId}
-              isConnected={streamConnected}
-              isReconnecting={streamReconnecting}
-              revertMessageID={revertMessageID}
-            />
             <SessionMoreButton />
           </Header.Actions>
         </Header>
-
+        <ReconnectingBanner key={sessionId} connected={streamConnected} />
       </div>
 
       <div className="flex flex-1 min-h-0">
@@ -1034,29 +1049,27 @@ export function SessionDetail() {
         activeSessionID={sessionId || undefined}
         remote={
           isRemoteServer
-            ? { serverId, serverName: linkedServer?.name, projectDirectory: remoteProjectDirectory }
+            ? {
+                serverId,
+                serverName: linkedServer?.name,
+                projectDirectory: remoteProjectDirectory,
+                isPending: sessionLoading,
+              }
             : undefined
         }
-        onSelectSession={(session, sessionRepo) => {
-          if (!isRemoteServer && sessionRepo.id === repoId) {
-            navigate(`/repos/${repoId}/sessions/${session.id}${sessionRouteSuffix}`)
-          } else {
-            navigate(getSessionPath(sessionRepo.id, session.id))
-          }
-          setSessionsDialogOpen(false)
-        }}
-        onSelectRemoteSession={(session, targetServerId) => {
-          navigate(getServerSessionPath(targetServerId, session.id))
-          setSessionsDialogOpen(false)
-        }}
-        onDeleteActiveSession={() => {
-          setSessionsDialogOpen(false)
-          handleCloseSession()
-        }}
-        onSelectRepo={(selectedRepo) => {
-          navigate(getRepoPath(selectedRepo.id))
-          setSessionsDialogOpen(false)
-        }}
+        {...pickerNavigation}
+      />
+
+      <SessionDetailsSheet
+        open={sessionDetailsOpen}
+        onOpenChange={setSessionDetailsOpen}
+        title={session?.title}
+        serverName={linkedServer?.name}
+        remote={isRemoteServer}
+        project={projectDisplayName}
+        branch={headerBranch}
+        directory={sessionDirectory}
+        onRename={renameSession}
       />
 
       {sideQuestion && sessionId && (
@@ -1090,7 +1103,7 @@ export function SessionDetail() {
           isOpen={!docked && fileBrowserOpen}
           onClose={handleFileBrowserClose}
           basePath={workspaceBasePath}
-          repoName={workspaceDisplayName}
+          repoName={projectDisplayName}
           repoId={repoId}
           initialSelectedFile={selectedFilePath}
         />
@@ -1148,7 +1161,7 @@ export function SessionDetail() {
             isOpen={!docked && sourceControlOpen}
             onClose={() => setSourceControlOpen(false)}
             currentBranch={repo?.currentBranch || repo?.branch || "main"}
-            repoName={workspaceDisplayName}
+            repoName={projectDisplayName}
           />
         )}
 
diff --git a/frontend/src/pages/__tests__/RemoteProject.test.tsx b/frontend/src/pages/__tests__/RemoteProject.test.tsx
index 1c4053a2f..324677ca0 100644
--- a/frontend/src/pages/__tests__/RemoteProject.test.tsx
+++ b/frontend/src/pages/__tests__/RemoteProject.test.tsx
@@ -22,10 +22,10 @@ const mocks = vi.hoisted(() => ({
   openTab: vi.fn(),
 }))
 
-vi.mock('@/api/opencode', () => ({
-  listProjects: mocks.listProjects,
-  getVcsInfo: mocks.getVcsInfo,
-}))
+vi.mock('@/api/opencode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/opencode')>()
+  return { ...actual, listProjects: mocks.listProjects, getVcsInfo: mocks.getVcsInfo }
+})
 
 vi.mock('@/hooks/useOpenCode', () => ({
   useCreateSession: mocks.useCreateSession,
diff --git a/frontend/src/pages/__tests__/SessionDetail.commands.test.tsx b/frontend/src/pages/__tests__/SessionDetail.commands.test.tsx
index 75efb2a8e..5d0b29fa5 100644
--- a/frontend/src/pages/__tests__/SessionDetail.commands.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.commands.test.tsx
@@ -124,6 +124,7 @@ vi.mock('@/hooks/useSettingsDialog', () => ({
 vi.mock('@/hooks/useMobile', () => ({
   useMobile: mocks.useMobile,
   useSwipeBack: vi.fn(() => ({ ref: vi.fn() })),
+  useSwipeDismiss: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })),
 }))
 
 vi.mock('@/hooks/useVisualViewport', () => ({
@@ -476,6 +477,37 @@ describe('SessionDetail command actions', () => {
     })
   })
 
+  it('opens the sessions picker dialog from the sessions command on desktop', async () => {
+    const { SessionPickerDialog } = await import('@/components/session/SessionPickerDialog')
+
+    renderSessionDetail()
+    const showSessions = await commandHandler('showSessions')
+
+    act(() => {
+      showSessions()
+    })
+
+    const props = vi.mocked(SessionPickerDialog).mock.calls.at(-1)?.[0] as Record<string, unknown>
+    expect(props).toMatchObject({ open: true })
+  })
+
+  it('opens the mobile sessions sheet instead of the dialog from the sessions command', async () => {
+    const { SessionPickerDialog } = await import('@/components/session/SessionPickerDialog')
+    mocks.useMobile.mockReturnValue(true)
+    const captured = { search: { current: '' }, pathname: { current: '' } }
+
+    renderSessionDetail(captured)
+    const showSessions = await commandHandler('showSessions')
+
+    act(() => {
+      showSessions()
+    })
+
+    await waitFor(() => expect(captured.search.current).toBe('?mobileTab=sessions'))
+    const props = vi.mocked(SessionPickerDialog).mock.calls.at(-1)?.[0] as Record<string, unknown>
+    expect(props).toMatchObject({ open: false })
+  })
+
   it('shows the error toast when the transcript fetch fails', async () => {
     mocks.listSessionMessages.mockRejectedValueOnce(new Error('page fetch failed'))
     mocks.copyTextToClipboard.mockImplementation(async (content: string | Promise<string>) => {
diff --git a/frontend/src/pages/__tests__/SessionDetail.not-found.test.tsx b/frontend/src/pages/__tests__/SessionDetail.not-found.test.tsx
index e8eea957c..b1b55e60d 100644
--- a/frontend/src/pages/__tests__/SessionDetail.not-found.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.not-found.test.tsx
@@ -53,7 +53,7 @@ vi.mock('@/hooks/useModelSelection', () => ({
 vi.mock('@/hooks/useTTS', () => ({ useTTS: vi.fn(() => ({ isEnabled: false })) }))
 vi.mock('@/hooks/useSettings', () => ({ useSettings: mocks.useSettings }))
 vi.mock('@/hooks/useSettingsDialog', () => ({ useSettingsDialog: mocks.useSettingsDialog }))
-vi.mock('@/hooks/useMobile', () => ({ useMobile: mocks.useMobile }))
+vi.mock('@/hooks/useMobile', () => ({ useMobile: mocks.useMobile, useSwipeBack: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })) }))
 vi.mock('@/hooks/useVisualViewport', () => ({ useVisualViewport: mocks.useVisualViewport }))
 vi.mock('@/contexts/KeyboardShortcutsContext', () => ({ useShortcutActions: mocks.useShortcutActions }))
 vi.mock('@/hooks/useAutoScroll', () => ({ useAutoScroll: mocks.useAutoScroll }))
@@ -87,7 +87,6 @@ vi.mock('@/components/message/MessageThread', () => ({ MessageThread: mocks.Mess
 vi.mock('@/components/message/PromptInput', () => ({ PromptInput: mocks.PromptInput }))
 vi.mock('@/components/message/FloatingTTSButton', () => ({ FloatingTTSButton: () => null }))
 vi.mock('@/components/message/MessageSkeleton', () => ({ MessageSkeleton: () => null }))
-vi.mock('@/components/session/ContextUsageIndicator', () => ({ ContextUsageIndicator: () => null }))
 vi.mock('@/components/session/SessionSendErrorBanner', () => ({ SessionSendErrorBanner: () => null }))
 vi.mock('@/components/session/BackgroundWorkBar', () => ({ BackgroundWorkBar: () => null }))
 vi.mock('@/components/session/SessionGoalBar', () => ({ SessionGoalBar: () => null }))
diff --git a/frontend/src/pages/__tests__/SessionDetail.remote.test.tsx b/frontend/src/pages/__tests__/SessionDetail.remote.test.tsx
index 4c2ef3712..3079727d7 100644
--- a/frontend/src/pages/__tests__/SessionDetail.remote.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.remote.test.tsx
@@ -8,7 +8,6 @@ import { SwipeNavigationProvider, useSwipeNavigation } from '@/contexts/SwipeNav
 import { getServerProjectPath } from '@/lib/navigation'
 import { LocationCatcher } from '@/test/test-utils'
 import { MessageThread } from '@/components/message/MessageThread'
-import { ContextUsageIndicator } from '@/components/session/ContextUsageIndicator'
 import { SessionSendErrorBanner } from '@/components/session/SessionSendErrorBanner'
 import { PendingActionsGroup } from '@/components/notifications/PendingActionsGroup'
 import { SessionDetail } from '../SessionDetail'
@@ -133,7 +132,6 @@ vi.mock('@/components/message/MessageThread', () => ({
 vi.mock('@/components/message/PromptInput', () => ({ PromptInput: vi.fn(() => null) }))
 vi.mock('@/components/message/FloatingTTSButton', () => ({ FloatingTTSButton: vi.fn(() => null) }))
 vi.mock('@/components/message/MessageSkeleton', () => ({ MessageSkeleton: vi.fn(() => null) }))
-vi.mock('@/components/session/ContextUsageIndicator', () => ({ ContextUsageIndicator: vi.fn(() => null) }))
 vi.mock('@/components/session/SessionSendErrorBanner', () => ({ SessionSendErrorBanner: vi.fn(() => null) }))
 vi.mock('@/components/session/BackgroundWorkBar', () => ({ BackgroundWorkBar: vi.fn(() => null) }))
 vi.mock('@/components/session/SessionGoalBar', () => ({ SessionGoalBar: mocks.SessionGoalBar }))
@@ -279,20 +277,21 @@ describe('SessionDetail remote server mode', () => {
     expect(mocks.useRepoSiblings).toHaveBeenCalledWith(undefined)
   })
 
-  it('titles the header with the server name and session directory', async () => {
+  it('shows the remote project in the header without the server name', async () => {
     renderRemoteSession()
 
     await waitFor(() => {
-      expect(screen.getByText('Kitchen')).toHaveClass('text-info')
+      expect(screen.getByLabelText('Remote server')).toBeInTheDocument()
     })
-    expect(screen.getByText('Kitchen').parentElement).toHaveTextContent('Kitchen · app')
+    expect(screen.getByText('app')).toBeInTheDocument()
+    expect(screen.queryByText(/Kitchen/)).not.toBeInTheDocument()
   })
 
   it('returns to the project page from the header back button', async () => {
     const { capturedPathname, capturedSearch } = renderRemoteSession()
 
     await waitFor(() => {
-      expect(screen.getByText('Kitchen').parentElement).toHaveTextContent('Kitchen · app')
+      expect(screen.getByLabelText('Remote server')).toBeInTheDocument()
     })
 
     fireEvent.click(screen.getByRole('button', { name: 'Go back' }))
@@ -452,9 +451,6 @@ describe('SessionDetail remote server mode', () => {
       expect(screen.getByTestId('message-thread')).toBeInTheDocument()
     })
 
-    expect(vi.mocked(ContextUsageIndicator).mock.calls.at(-1)?.[0]).toEqual(
-      expect.objectContaining({ isConnected: false, isReconnecting: true }),
-    )
     expect(vi.mocked(SessionSendErrorBanner).mock.calls.at(-1)?.[0]).toEqual(
       expect.objectContaining({ isConnected: false, isReconnecting: true }),
     )
@@ -467,9 +463,6 @@ describe('SessionDetail remote server mode', () => {
       expect(screen.getByTestId('message-thread')).toBeInTheDocument()
     })
 
-    expect(vi.mocked(ContextUsageIndicator).mock.calls.at(-1)?.[0]).toEqual(
-      expect.objectContaining({ isConnected: true, isReconnecting: false }),
-    )
     expect(vi.mocked(SessionSendErrorBanner).mock.calls.at(-1)?.[0]).toEqual(
       expect.objectContaining({ isConnected: true, isReconnecting: false }),
     )
@@ -484,11 +477,34 @@ describe('SessionDetail remote server mode', () => {
       expect(screen.getByTestId('message-thread')).toBeInTheDocument()
     })
 
-    expect(vi.mocked(ContextUsageIndicator).mock.calls.at(-1)?.[0]).toEqual(
+    expect(vi.mocked(SessionSendErrorBanner).mock.calls.at(-1)?.[0]).toEqual(
       expect.objectContaining({ isConnected: false, isReconnecting: true }),
     )
   })
 
+  it('navigates to the parent session from the header pill', async () => {
+    mocks.useSession.mockReturnValue({
+      data: { ...remoteSession, parentID: 'ses_parent' },
+      isLoading: false,
+      error: undefined,
+    })
+
+    const { capturedPathname } = renderRemoteSession()
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Parent session' }))
+
+    expect(capturedPathname.current).toBe('/servers/srv_kitchen/sessions/ses_parent')
+  })
+
+  it('opens the session details sheet from the header title', async () => {
+    renderRemoteSession()
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Session details: Remote chat' }))
+
+    expect(await screen.findByRole('dialog')).toHaveAccessibleName('Session details')
+    expect(screen.getByText('/home/me/app')).toBeInTheDocument()
+  })
+
   it('navigates child sessions within the linked server route', async () => {
     const { capturedPathname } = renderRemoteSession()
 
@@ -524,6 +540,7 @@ describe('SessionDetail remote server mode', () => {
           serverId: 'srv_kitchen',
           serverName: 'Kitchen',
           projectDirectory: '/home/me/app',
+          isPending: false,
         },
       }),
     )
diff --git a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
index 70b102259..52a379df2 100644
--- a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
@@ -79,6 +79,7 @@ vi.mock('@/hooks/useSettingsDialog', () => ({
 vi.mock('@/hooks/useMobile', () => ({
   useMobile: mocks.useMobile,
   useSwipeBack: vi.fn(() => ({ ref: vi.fn() })),
+  useSwipeDismiss: vi.fn(() => ({ bind: vi.fn(), swipeProgress: 0, swipeStyles: {} })),
 }))
 
 vi.mock('@/hooks/useVisualViewport', () => ({
diff --git a/frontend/src/test/fixtures/session-picker.ts b/frontend/src/test/fixtures/session-picker.ts
new file mode 100644
index 000000000..28bbc940e
--- /dev/null
+++ b/frontend/src/test/fixtures/session-picker.ts
@@ -0,0 +1,40 @@
+import type { Repo, Session } from '@/api/types'
+
+/**
+ * Builds a session fixture for picker tests.
+ *
+ * @param id Session id.
+ * @param title Session title.
+ * @param directory Session working directory.
+ * @param updated Session creation and update timestamp.
+ */
+export function makeSession(id: string, title: string, directory: string, updated = Date.now()): Session {
+  return {
+    id,
+    projectID: 'proj',
+    title,
+    time: { created: updated, updated },
+    location: { directory },
+    cost: 0,
+    tokens: {},
+  } as unknown as Session
+}
+
+/**
+ * Builds a ready repo fixture for picker tests.
+ *
+ * @param id Repo id.
+ * @param name Repo name.
+ * @param fullPath Repo working directory.
+ */
+export function makeRepo(id: number, name: string, fullPath: string): Repo {
+  return {
+    id,
+    name,
+    localPath: fullPath,
+    fullPath,
+    defaultBranch: 'main',
+    cloneStatus: 'ready',
+    clonedAt: 0,
+  }
+}
diff --git a/frontend/src/test/test-utils.tsx b/frontend/src/test/test-utils.tsx
index 926bcb34e..d7b45c7ab 100644
--- a/frontend/src/test/test-utils.tsx
+++ b/frontend/src/test/test-utils.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, type ReactNode } from 'react'
 import { renderHook } from '@testing-library/react'
-import { MemoryRouter, useLocation } from 'react-router-dom'
+import { MemoryRouter, useLocation, useNavigationType } from 'react-router-dom'
 import { vi } from 'vitest'
 import type { useSettings } from '@/hooks/useSettings'
 import type { VoiceConversationController } from '@/hooks/useVoiceConversation'
@@ -89,14 +89,18 @@ export function renderHookWithRouter<T>(renderFn: () => T, initialEntries?: stri
 export function LocationCatcher({
   capturedSearch,
   capturedPathname,
+  capturedNavigationType,
 }: {
   capturedSearch: { current: string }
   capturedPathname?: { current: string }
+  capturedNavigationType?: { current: string }
 }) {
   const location = useLocation()
+  const navigationType = useNavigationType()
   useEffect(() => {
     capturedSearch.current = location.search
     if (capturedPathname) capturedPathname.current = location.pathname
+    if (capturedNavigationType) capturedNavigationType.current = navigationType
   })
   return null
 }