diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 5ad31eac974..983ace8c2e3 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -716,6 +716,8 @@ jobs:
             config/scripts/mobile-web-app-agent-history-render.test.mjs \
             config/scripts/mobile-web-app-tasks-render.test.mjs \
             config/scripts/mobile-web-app-tasks-external-links.test.mjs \
+            config/scripts/mobile-web-app-files-external-links.test.mjs \
+            config/scripts/mobile-web-app-files-render.test.mjs \
             config/scripts/mobile-web-app-page-closure-families.test.mjs
 
   cross-version-wire:
diff --git a/config/scripts/build-mobile-web-app-bundle.test.mjs b/config/scripts/build-mobile-web-app-bundle.test.mjs
index ce2f4761dea..fb70640924a 100644
--- a/config/scripts/build-mobile-web-app-bundle.test.mjs
+++ b/config/scripts/build-mobile-web-app-bundle.test.mjs
@@ -72,6 +72,26 @@ async function withScratch(run) {
   }
 }
 
+/**
+ * Every page route this bundle declares, written out rather than read from the source that
+ * produces it: the point is to pin the list, and comparing the manifest to its own input would
+ * pass whatever that input became. Shared by the two assertions below, which is also what keeps
+ * this file under the 600-line cap.
+ */
+const EXPECTED_PAGE_ROUTES = [
+  { pathname: '/h/[hostId]', grants: ['navigate', 'storage'] },
+  { pathname: '/h/[hostId]/agent-history/[worktreeId]', grants: ['navigate', 'storage'] },
+  {
+    pathname: '/h/[hostId]/tasks',
+    grants: ['navigate', 'storage', 'externalLink', 'native.clipboard.write']
+  },
+  { pathname: '/h/[hostId]/files/[worktreeId]', grants: ['navigate', 'storage', 'externalLink'] },
+  {
+    pathname: '/h/[hostId]/files/preview/[worktreeId]',
+    grants: ['navigate', 'storage', 'externalLink']
+  }
+]
+
 describe('the page routes the manifest declares', () => {
   it('turns a route key into the URL pattern expo-router gives it', () => {
     expect(routePathnameFromKey('./h/[hostId]/index.tsx')).toBe('/h/[hostId]')
@@ -88,14 +108,7 @@ describe('the page routes the manifest declares', () => {
 
   it('declares only routes the bundle has a module for', async () => {
     const keys = await collectMobileWebAppRouteKeys(appDir)
-    expect(resolveMobileWebPageRoutes(keys)).toEqual([
-      { pathname: '/h/[hostId]', grants: ['navigate', 'storage'] },
-      { pathname: '/h/[hostId]/agent-history/[worktreeId]', grants: ['navigate', 'storage'] },
-      {
-        pathname: '/h/[hostId]/tasks',
-        grants: ['navigate', 'storage', 'externalLink', 'native.clipboard.write']
-      }
-    ])
+    expect(resolveMobileWebPageRoutes(keys)).toEqual(EXPECTED_PAGE_ROUTES)
   })
 
   it('fails the build on a declaration the bundle cannot render', () => {
@@ -114,14 +127,7 @@ describe('the page routes the manifest declares', () => {
     async () => {
       await withScratch(async (scratch) => {
         const { manifest } = await buildMobileWebAppBundle({ outDir: join(scratch, 'bundle') })
-        expect(manifest.routes).toEqual([
-          { pathname: '/h/[hostId]', grants: ['navigate', 'storage'] },
-          { pathname: '/h/[hostId]/agent-history/[worktreeId]', grants: ['navigate', 'storage'] },
-          {
-            pathname: '/h/[hostId]/tasks',
-            grants: ['navigate', 'storage', 'externalLink', 'native.clipboard.write']
-          }
-        ])
+        expect(manifest.routes).toEqual(EXPECTED_PAGE_ROUTES)
         // The routes are derived from the same tree the script is built from, so the assets
         // already decide them and the id has no reason to carry them as well.
         expect(manifest.buildId).toBe(computeMobileWebBundleBuildId(manifest.assets))
@@ -393,6 +399,21 @@ describeBundling('the app bundle', () => {
     expect(shipped).not.toContain('lucide')
   })
 
+  it('ships no haptic that reaches for the DOM', async () => {
+    // expo-haptics' web build fakes an iOS haptic by appending a hidden
+    // `<label><input type="checkbox" switch>` to document.head, clicking it, and removing it —
+    // once per call. The file explorer calls triggerSelection on every row tap, and C1.9 already
+    // traced a swallowed long press on the worktree list to that stray click. `haptics.web.ts` is
+    // what keeps the whole shim out of the bundle, so this reads the bytes rather than the import.
+    for (const source of allScriptSource(await bundleMobileWebApp())) {
+      // The shim's own fingerprint, not `navigator.vibrate`: react-native-web's Vibration export
+      // calls that too, and it touches no DOM until something invokes it.
+      expect(source).not.toContain('ariaHidden')
+      expect(source).not.toContain('pointer: coarse')
+      expect(source).not.toContain('setAttribute("switch"')
+    }
+  }, 120_000)
+
   it('embeds no absolute path from this checkout', async () => {
     // Every chunk, not only the entry: the route manifest names each route by absolute path, and
     // the chunk that import resolves to is where such a path would survive.
diff --git a/config/scripts/mobile-web-app-external-link-seam.mjs b/config/scripts/mobile-web-app-external-link-seam.mjs
new file mode 100644
index 00000000000..6ee58482538
--- /dev/null
+++ b/config/scripts/mobile-web-app-external-link-seam.mjs
@@ -0,0 +1,26 @@
+/**
+ * The external-link seam, and how a census recognises a module that went around it.
+ *
+ * Shared by every page route's census rather than restated in each: two spellings of one rule
+ * drift, and the half that stops being enforced is the half nobody reads again.
+ */
+
+/** The seam, as the web build resolves it: `.web.ts` wins under the builder's resolveExtensions,
+ *  and it is the one module a page closure may reach react-native's `Linking` from. */
+export const EXTERNAL_LINK_SEAM = 'src/platform/external-link.web.ts'
+
+/**
+ * Whether a module reaches react-native's own `Linking`, by name or through a namespace import.
+ *
+ * Both quote styles: the tree is single-quoted by the formatter today, so a double-quoted
+ * specifier would have walked past this unseen — and a census that cannot see a call site is one
+ * that passes for the wrong reason.
+ */
+export function reachesReactNativeLinking(source) {
+  const named = /import\s*\{[^}]*\bLinking\b[^}]*\}\s*from\s*['"]react-native['"]/s
+  const namespace = /import\s*\*\s*as\s*(\w+)\s*from\s*['"]react-native['"]/
+  const asNamespace = namespace.exec(source)
+  return (
+    named.test(source) || (asNamespace !== null && source.includes(`${asNamespace[1]}.Linking`))
+  )
+}
diff --git a/config/scripts/mobile-web-app-external-link-seam.test.mjs b/config/scripts/mobile-web-app-external-link-seam.test.mjs
new file mode 100644
index 00000000000..4150d421aac
--- /dev/null
+++ b/config/scripts/mobile-web-app-external-link-seam.test.mjs
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { reachesReactNativeLinking } from './mobile-web-app-external-link-seam.mjs'
+describe('the seam predicate', () => {
+  it.each([
+    ["import { Linking } from 'react-native'", true],
+    ['import { Linking } from "react-native"', true],
+    ["import * as RN from 'react-native'\nRN.Linking.openURL(u)", true],
+    ['import * as RN from "react-native"\nRN.Linking.openURL(u)', true],
+    ["import { View } from 'react-native'", false],
+    ['import { View } from "react-native"', false]
+  ])('reads %s as %s', (source, expected) => {
+    expect(reachesReactNativeLinking(source)).toBe(expected)
+  })
+})
diff --git a/config/scripts/mobile-web-app-files-external-links.test.mjs b/config/scripts/mobile-web-app-files-external-links.test.mjs
new file mode 100644
index 00000000000..65847719724
--- /dev/null
+++ b/config/scripts/mobile-web-app-files-external-links.test.mjs
@@ -0,0 +1,127 @@
+/**
+ * What the two files pages may reach for a URL and for the clipboard, which is what their grants
+ * are declared against.
+ *
+ * Inside the shell's WebView react-native-web's `Linking.openURL` calls `window.open(url, '_blank')`,
+ * which both shells refuse and which resolves whether or not anything opened, so a call site left on
+ * that path reports success into a tap that did nothing.
+ *
+ * Both routes declare `externalLink`, for different reasons, and this file holds each to its own.
+ * The preview renders Markdown and reaches the seam through `MobileMarkdown`, a consumer inside the
+ * domain. The explorer has no such consumer — its only reach is the shared host layout, which every
+ * page route reaches and which the worktree list declares nothing for — and declares the grant
+ * because its rows push to the preview in-page, under the session the explorer opened.
+ */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { mobileWebAppRouteClosure } from './build-mobile-web-app-bundle.mjs'
+import { MOBILE_WEB_PAGE_ROUTES } from './mobile-web-page-routes.mjs'
+import { mobileWebAppDependenciesPresent } from './mobile-web-app-bundle-dependencies.mjs'
+import {
+  EXTERNAL_LINK_SEAM as SEAM,
+  reachesReactNativeLinking
+} from './mobile-web-app-external-link-seam.mjs'
+
+const mobileDir = fileURLToPath(new URL('../../mobile/', import.meta.url))
+const describeClosure = mobileWebAppDependenciesPresent() ? describe : describe.skip
+
+const EXPLORER = 'app/h/[hostId]/files/[worktreeId].tsx'
+const PREVIEW = 'app/h/[hostId]/files/preview/[worktreeId].tsx'
+
+/** The seam's only in-domain consumer, and the reason the preview declares the grant itself. */
+const MARKDOWN = 'src/components/MobileMarkdown.tsx'
+
+function offenders(closure) {
+  return closure.local
+    .filter((file) => file !== SEAM)
+    .filter((file) => {
+      try {
+        return reachesReactNativeLinking(readFileSync(join(mobileDir, file), 'utf8'))
+      } catch {
+        return false
+      }
+    })
+    .sort()
+}
+
+describeClosure(
+  'the files page closures',
+  () => {
+    it.each([EXPLORER, PREVIEW])('opens every external URL through the seam: %s', async (route) => {
+      const closure = await mobileWebAppRouteClosure(route)
+      expect(offenders(closure)).toEqual([])
+    })
+
+    it.each([EXPLORER, PREVIEW])(
+      'contains the seam, so the rule is not vacuous: %s',
+      async (route) => {
+        const closure = await mobileWebAppRouteClosure(route)
+        expect(closure.local).toContain(SEAM)
+        expect(closure.local.length).toBeGreaterThan(250)
+      }
+    )
+
+    it('reaches the seam from the Markdown preview, which is what earns the preview its grant', async () => {
+      // The grant difference between the two routes, asserted rather than asserted-about: without
+      // this the preview's `externalLink` would be a line in a manifest nothing holds to a caller.
+      const preview = await mobileWebAppRouteClosure(PREVIEW)
+      const explorer = await mobileWebAppRouteClosure(EXPLORER)
+      expect(preview.local).toContain(MARKDOWN)
+      expect(explorer.local).not.toContain(MARKDOWN)
+    })
+  },
+  240_000
+)
+
+/**
+ * The explorer declares at least what the preview does, because it can become the preview.
+ *
+ * Grants are resolved once, from the route the shell opened: `grantsForRoute` reads
+ * `session.routePathname` and `init.grants.native` carries the answer for the life of that
+ * session. The explorer's rows push to the preview, and because the preview is a page route the
+ * handoff keeps that push inside the same document — no second `init`, no re-resolved grants. So a
+ * preview reached that way runs under the explorer's grants, and anything the preview is granted
+ * and the explorer is not is refused at the call site with nothing on screen to say so.
+ *
+ * Pinned as a superset rather than as equality: the explorer may legitimately need a grant the
+ * preview does not.
+ */
+describe('the grants an in-page hop carries', () => {
+  const grantsOf = (pathname) =>
+    MOBILE_WEB_PAGE_ROUTES.find((route) => route.pathname === pathname)?.grants
+
+  it('gives the explorer every grant the preview declares', () => {
+    const explorer = grantsOf('/h/[hostId]/files/[worktreeId]')
+    const preview = grantsOf('/h/[hostId]/files/preview/[worktreeId]')
+    // Both declared, so a renamed route cannot turn this into a comparison of two undefineds.
+    expect(explorer, 'the explorer is declared').toBeDefined()
+    expect(preview, 'the preview is declared').toBeDefined()
+    expect(preview.length, 'the preview declares something to inherit').toBeGreaterThan(0)
+    expect(preview.filter((grant) => !explorer.includes(grant))).toEqual([])
+  })
+})
+
+/**
+ * Neither files page writes a clipboard, which is why neither is granted `native.clipboard.write`.
+ *
+ * The control is the tasks closure: it does carry the seam, so a probe that finds nothing here is
+ * one that can find something when there is something to find.
+ */
+describeClosure(
+  'the clipboard the files pages reach',
+  () => {
+    it.each([EXPLORER, PREVIEW])('carries no clipboard at all: %s', async (route) => {
+      const closure = await mobileWebAppRouteClosure(route)
+      expect(closure.modules.filter((file) => file.endsWith('ExpoClipboard.web.js'))).toEqual([])
+      expect(closure.local).not.toContain('src/platform/clipboard.web.ts')
+    })
+
+    it('finds the clipboard seam on the route that is granted it', async () => {
+      const tasks = await mobileWebAppRouteClosure('app/h/[hostId]/tasks.tsx')
+      expect(tasks.local).toContain('src/platform/clipboard.web.ts')
+    })
+  },
+  240_000
+)
diff --git a/config/scripts/mobile-web-app-files-render.test.mjs b/config/scripts/mobile-web-app-files-render.test.mjs
new file mode 100644
index 00000000000..52ab7a50927
--- /dev/null
+++ b/config/scripts/mobile-web-app-files-render.test.mjs
@@ -0,0 +1,178 @@
+import { mkdtemp, rm } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { chromium } from 'playwright-core'
+import { buildMobileWebAppBundle } from './build-mobile-web-app-bundle.mjs'
+import { mobileWebAppDependenciesPresent } from './mobile-web-app-bundle-dependencies.mjs'
+import {
+  createBundleServer,
+  installShellDouble,
+  readBridgeFaultGrant,
+  readBridgeProtocolVersion,
+  readShellCsp
+} from './mobile-web-app-render-harness.mjs'
+
+/**
+ * The file preview's unsaved-draft prompt, in a real browser.
+ *
+ * The render check next door mounts both files routes and reads what they paint, but it never taps
+ * anything, so the one control on this screen that opens a modal was unproved on the page. Two
+ * things only a browser answers for it: that `ConfirmModal` — a `BottomDrawer`, and so Reanimated,
+ * a portal and a gesture handler — actually paints inside the shell's page, and that opening it
+ * registers no `hardwareBackPress` handler.
+ *
+ * The second is the whole reason this file exists. React Native Web's
+ * `BackHandler.addEventListener` is a `console.error` and an inert subscription, and the drawer
+ * registered one whenever it was visible and interactive. So the page's own hardware-back guard
+ * being platform-gated was never the end of it: any page drawer opening put that line on the
+ * console. Asserted as the absence of the line, with the modal's title as the precondition that
+ * something was actually opened.
+ */
+
+const HOST_ROUTE = '/h/render-check-host'
+const WORKTREE = 'wt-1'
+const PREVIEW_ROUTE = `${HOST_ROUTE}/files/preview/${WORKTREE}`
+/** The patterns `init.pageRoutes` names, which is what the page matches a navigation against. */
+const PAGE_ROUTE_PATTERNS = [
+  '/h/[hostId]',
+  '/h/[hostId]/files/[worktreeId]',
+  '/h/[hostId]/files/preview/[worktreeId]'
+]
+const SHELL_SESSION_ID = 'render-check-session'
+const SHELL_BUILD_ID = 'render-check-build'
+const SHELL_HOST = {
+  id: 'render-check-host',
+  name: 'Render Check Host',
+  endpoint: 'ws://render-check',
+  lastConnected: 1
+}
+/** Exactly what the preview declares in `MOBILE_WEB_PAGE_ROUTES`, plus the protocol's own grant. */
+const PREVIEW_GRANTS = ['navigate', 'storage', 'externalLink']
+
+/**
+ * A terminal artifact, which is the only preview this screen lets anyone edit.
+ *
+ * A worktree file is read-only, so it can hold no draft and never reaches the prompt.
+ * `isEditableMobileTerminalArtifactPreview` wants a ready, untruncated, non-image preview, and
+ * `hasUnsavedMobileTerminalArtifactDraft` wants the draft to differ from what was loaded.
+ */
+const ARTIFACT_PATH = '/logs/run.txt'
+const ARTIFACT_TITLE = 'run.txt'
+const LOADED_CONTENT = 'hello'
+const EDITED_CONTENT = 'hello, edited'
+const PREVIEW_PARAMS = {
+  source: 'terminalArtifact',
+  absolutePath: ARTIFACT_PATH,
+  grantId: 'grant-1'
+}
+const REPLIES = {
+  'files.readTerminalArtifact': {
+    content: LOADED_CONTENT,
+    truncated: false,
+    byteLength: LOADED_CONTENT.length
+  }
+}
+
+const bundles = mobileWebAppDependenciesPresent()
+const describeRender = bundles ? describe : describe.skip
+
+let scratch
+let server
+let browser
+let origin
+let cspHeader = null
+let bridgeVersion = null
+let faultGrant = null
+
+beforeAll(async () => {
+  if (!bundles) {
+    return
+  }
+  cspHeader = await readShellCsp()
+  bridgeVersion = await readBridgeProtocolVersion()
+  faultGrant = await readBridgeFaultGrant()
+  scratch = await mkdtemp(join(tmpdir(), 'orca-mobile-web-app-files-'))
+  const built = await buildMobileWebAppBundle({ outDir: join(scratch, 'bundle') })
+  const served = await createBundleServer({ outDir: built.outDir, cspHeader })
+  server = served.server
+  origin = served.origin
+  const executablePath = process.env.ORCA_MOBILE_WEB_RENDER_BROWSER
+  browser = await chromium.launch({ headless: true, ...(executablePath ? { executablePath } : {}) })
+}, 240_000)
+
+afterAll(async () => {
+  await browser?.close()
+  server?.close()
+  if (scratch) {
+    await rm(scratch, { recursive: true, force: true })
+  }
+})
+
+async function openPreview() {
+  const page = await browser.newPage({ viewport: { width: 390, height: 844 } })
+  await page.addInitScript(installShellDouble, {
+    version: bridgeVersion,
+    sessionId: SHELL_SESSION_ID,
+    buildId: SHELL_BUILD_ID,
+    route: { pathname: PREVIEW_ROUTE, params: PREVIEW_PARAMS },
+    host: SHELL_HOST,
+    storage: {},
+    faultGrant,
+    grants: [faultGrant, ...PREVIEW_GRANTS],
+    pageRoutes: PAGE_ROUTE_PATTERNS,
+    replies: REPLIES
+  })
+  const errors = []
+  page.on('pageerror', (error) => errors.push(`${error.name}: ${error.message}`))
+  page.on('console', (message) => {
+    if (message.type() === 'error') {
+      errors.push(`console.error: ${message.text()}`)
+    }
+  })
+  await page.goto(`${origin}/`, { waitUntil: 'load' })
+  await page.waitForFunction(() => document.documentElement.dataset.orcaWebEntry === 'mounted', {
+    timeout: 60_000,
+    polling: 250
+  })
+  return { page, errors }
+}
+
+describeRender(
+  'the file preview page',
+  () => {
+    it('asks before discarding a draft, without registering a hardware back handler', async () => {
+      const { page, errors } = await openPreview()
+      // The editor is the proof the artifact loaded and the screen decided it was editable; the
+      // prompt is unreachable otherwise, so a missing one here would be a vacuous pass below.
+      const editor = page.getByLabel(`${ARTIFACT_TITLE} editor`)
+      await editor.waitFor({ timeout: 60_000 })
+      await editor.fill(EDITED_CONTENT)
+      await page.getByLabel('Back to files').click()
+
+      const title = page.getByText('Discard changes?')
+      await title.waitFor({ timeout: 30_000 })
+      expect(await title.isVisible()).toBe(true)
+      // The line react-native-web logs from `BackHandler.addEventListener`. The drawer registered
+      // one on every open before it was platform-gated, so this is red without that guard.
+      expect(errors.filter((entry) => entry.includes('BackHandler'))).toEqual([])
+      await page.close()
+    }, 180_000)
+
+    it('leaves the draft alone when the answer is to stay', async () => {
+      const { page } = await openPreview()
+      const editor = page.getByLabel(`${ARTIFACT_TITLE} editor`)
+      await editor.waitFor({ timeout: 60_000 })
+      await editor.fill(EDITED_CONTENT)
+      await page.getByLabel('Back to files').click()
+      await page.getByText('Discard changes?').waitFor({ timeout: 30_000 })
+
+      await page.getByText('Stay').click()
+      await page.getByText('Discard changes?').waitFor({ state: 'hidden', timeout: 30_000 })
+      // Still the page, still the draft: the prompt closing must not have navigated or reloaded.
+      expect(await editor.inputValue()).toBe(EDITED_CONTENT)
+      await page.close()
+    }, 180_000)
+  },
+  600_000
+)
diff --git a/config/scripts/mobile-web-app-render.test.mjs b/config/scripts/mobile-web-app-render.test.mjs
index eb63bd496d0..32caf50259c 100644
--- a/config/scripts/mobile-web-app-render.test.mjs
+++ b/config/scripts/mobile-web-app-render.test.mjs
@@ -417,6 +417,43 @@ describeRender('the Route A page in a real browser', () => {
     expect(text).not.toContain(UNMATCHED)
   }, 60_000)
 
+  // Both files routes reach OrcaMobileWebShellView from their native file, whose module calls
+  // requireNativeViewManager at import and throws in a browser. The manifest defers every route
+  // behind `import()`, so that throw is invisible until the page opens this route — which is why
+  // it needs a `.web.tsx` sibling and why proving it costs a render of the route itself.
+  it('mounts the file explorer, which its native route module cannot do', async () => {
+    const worktreeRoute = `${HOST_ROUTE}/files/worktree-a`
+    const { errors, cspErrors, text } = await render(worktreeRoute, 'Files', {
+      shellRoute: { pathname: worktreeRoute, params: { name: 'Example Worktree' } }
+    })
+    expect(cspErrors).toEqual([])
+    expect(errors).toEqual([])
+    expect(text).toContain('Files')
+    expect(text).toContain('Example Worktree')
+    expect(text).not.toContain(UNMATCHED)
+  }, 60_000)
+
+  it('mounts the file preview, reading the file path out of a param and not a segment', async () => {
+    const previewRoute = `${HOST_ROUTE}/files/preview/worktree-a`
+    const { errors, cspErrors, text, url } = await render(previewRoute, 'readme.md', {
+      shellRoute: {
+        pathname: previewRoute,
+        params: { relativePath: 'docs/my notes/readme.md', source: 'worktree' }
+      }
+    })
+    expect(cspErrors).toEqual([])
+    // Empty, and that is the point: React Native Web's BackHandler logs "not supported on web" for
+    // anyone who registers one, so this line is what proves the screen no longer does. Android back
+    // inside the page therefore pops the native stack without the unsaved-draft prompt, which lives
+    // on the page's own Back control.
+    expect(errors).toEqual([])
+    // The title is the last segment of the path param, so this is also the proof the param
+    // survived the round trip through `URLSearchParams` that `/` and the space go through.
+    expect(text).toContain('readme.md')
+    expect(url).toBe(`${previewRoute}?relativePath=docs%2Fmy+notes%2Freadme.md&source=worktree`)
+    expect(text).not.toContain(UNMATCHED)
+  }, 60_000)
+
   it('renders the unmatched route rather than crashing on a path with no module', async () => {
     const { errors, cspErrors, text } = await render(`${HOST_ROUTE}/not-a-route`, UNMATCHED)
     expect(cspErrors).toEqual([])
diff --git a/config/scripts/mobile-web-app-tasks-external-links.test.mjs b/config/scripts/mobile-web-app-tasks-external-links.test.mjs
index b815e6d7944..d52b9af39da 100644
--- a/config/scripts/mobile-web-app-tasks-external-links.test.mjs
+++ b/config/scripts/mobile-web-app-tasks-external-links.test.mjs
@@ -17,24 +17,14 @@ import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { mobileWebAppRouteClosure } from './build-mobile-web-app-bundle.mjs'
 import { mobileWebAppDependenciesPresent } from './mobile-web-app-bundle-dependencies.mjs'
+import {
+  EXTERNAL_LINK_SEAM as SEAM,
+  reachesReactNativeLinking
+} from './mobile-web-app-external-link-seam.mjs'
 
 const mobileDir = fileURLToPath(new URL('../../mobile/', import.meta.url))
 const describeClosure = mobileWebAppDependenciesPresent() ? describe : describe.skip
 
-/** The seam, as the web build resolves it: `.web.ts` wins under the builder's resolveExtensions,
- *  and it is the one module in this closure allowed to reach react-native's `Linking`. */
-const SEAM = 'src/platform/external-link.web.ts'
-
-/** Whether a module reaches react-native's own `Linking`, by name or through a namespace import. */
-function reachesReactNativeLinking(source) {
-  const named = /import\s*\{[^}]*\bLinking\b[^}]*\}\s*from\s*'react-native'/s
-  const namespace = /import\s*\*\s*as\s*(\w+)\s*from\s*'react-native'/
-  const asNamespace = namespace.exec(source)
-  return (
-    named.test(source) || (asNamespace !== null && source.includes(`${asNamespace[1]}.Linking`))
-  )
-}
-
 describeClosure(
   'the tasks page closure',
   () => {
diff --git a/config/scripts/mobile-web-page-routes.mjs b/config/scripts/mobile-web-page-routes.mjs
index 922c1070c91..23ec7211481 100644
--- a/config/scripts/mobile-web-page-routes.mjs
+++ b/config/scripts/mobile-web-page-routes.mjs
@@ -28,5 +28,41 @@ export const MOBILE_WEB_PAGE_ROUTES = [
   {
     pathname: '/h/[hostId]/tasks',
     grants: ['navigate', 'storage', 'externalLink', 'native.clipboard.write']
+  },
+  // The file explorer. `navigate` because its Back pops the native stack. `storage` for the shared
+  // components the host layout renders above it.
+  //
+  // `externalLink` is transitive, not its own: a row opens the preview, and because that is a page
+  // route the handoff keeps the push inside this document. Grants are resolved once, from the route
+  // the shell opened (`grantsForRoute` on `session.routePathname`), so a preview reached that way
+  // runs under *this* route's grants for the life of the session — and a Markdown link in it would
+  // be refused by `notifyExternalLink` and do nothing at all. So a route must declare a superset of
+  // the grants of every page route its screens push to locally, which for this one means the
+  // preview's list. The census beside it pins that pair.
+  //
+  // Nothing the explorer itself renders opens a URL. The two openers in its own closure are the
+  // shared layout's — the protocol wall, and the New Workspace source field the sidebar renders on
+  // a wide layout — and every `/h` route reaches both, `/h/[hostId]` included, which declares no
+  // `externalLink`. That tablet tap stays dead on all of them: a pre-existing gap this route
+  // neither widens nor fixes.
+  //
+  // One hop is still open and is not this series' to close: the sidebar `HostScreen` the layout
+  // renders on a wide layout pushes to `/h/<id>/tasks` through the handoff, which is local, so
+  // from any page route on a tablet the tasks page runs without `native.clipboard.write` and its
+  // copy actions refuse silently. Pre-existing on main for the worktree list and agent history
+  // since C2.1; the fix is a handoff rule — hand off to the shell when the target's grants exceed
+  // the session's — in its own PR.
+  {
+    pathname: '/h/[hostId]/files/[worktreeId]',
+    grants: ['navigate', 'storage', 'externalLink']
+  },
+  // The file preview. Same three. `externalLink` is this route's own rather than inherited: a
+  // Markdown preview renders links and `MobileMarkdown` opens them through the platform seam, which
+  // is a consumer inside the domain rather than the shared wall. The explorer declares the same
+  // list only because it can become this route in-page, so the two happen to be equal today and
+  // the reasons are not.
+  {
+    pathname: '/h/[hostId]/files/preview/[worktreeId]',
+    grants: ['navigate', 'storage', 'externalLink']
   }
 ]
diff --git a/mobile/app/h/[hostId]/files/[worktreeId].tsx b/mobile/app/h/[hostId]/files/[worktreeId].tsx
index d4f45e0318d..bfdcafbfdb6 100644
--- a/mobile/app/h/[hostId]/files/[worktreeId].tsx
+++ b/mobile/app/h/[hostId]/files/[worktreeId].tsx
@@ -1,13 +1,64 @@
 import { useLocalSearchParams } from 'expo-router'
 import { MobileFileExplorerPanel } from '../../../../src/files/MobileFileExplorerPanel'
+import { firstParam } from '../../../../src/source-control/mobile-source-control-screen-state'
+import {
+  mobileFileShellRoute,
+  mobileFileShellRouteKey
+} from '../../../../src/files/mobile-file-shell-route'
+import { MobileWebShellScreen } from '../../../../src/mobile-web-shell/MobileWebShellScreen'
+import { useMobileWebShellEnabled } from '../../../../src/mobile-web-shell/use-mobile-web-shell-enabled'
 
+/**
+ * The file explorer, from the desktop's bundle or from this app.
+ *
+ * The shell decides, not this switch: it renders the page only for a route the bundle lists with
+ * grants this app implements, and answers `native-route` otherwise, which is what `fallback` is.
+ * `enabled === null` is the flag read still settling and renders the native screen, which is the
+ * only frame a store build ever paints here.
+ *
+ * Encoded, not interpolated raw, for the reason `web.tsx` states: an id carrying `?`, `#` or
+ * whitespace would build a pathname the page refuses and mount nothing.
+ */
 export default function MobileFileExplorerScreen() {
-  const { hostId, worktreeId, name } = useLocalSearchParams<{
-    hostId: string
-    worktreeId: string
-    name?: string
+  // Through `firstParam`, as the tasks and agent-history switches do: expo-router answers a
+  // repeated query key with an array, and a bare read puts it straight into the template, where
+  // `String(['a','b'])` is `a,b` and `encodeURIComponent` makes it the single segment `a%2Cb` —
+  // which the bridge's segment rule accepts, so the shell opens a page for a host nobody has.
+  const params = useLocalSearchParams<{
+    hostId?: string | string[]
+    worktreeId?: string | string[]
+    name?: string | string[]
   }>()
-  return (
+  const hostId = firstParam(params.hostId)
+  const worktreeId = firstParam(params.worktreeId)
+  const name = firstParam(params.name)
+  const enabled = useMobileWebShellEnabled()
+  const native = (
     <MobileFileExplorerPanel hostId={hostId} worktreeId={worktreeId} name={name} embedded={false} />
   )
+
+  const route =
+    hostId && worktreeId
+      ? mobileFileShellRoute({
+          pathname: `/h/${encodeURIComponent(hostId)}/files/${encodeURIComponent(worktreeId)}`,
+          // Omitted rather than empty: the panel derives its own label from the worktree id when
+          // the caller named none, where `name=` with nothing after it is a label.
+          ...(name === '' ? {} : { params: { name } })
+        })
+      : null
+
+  if (enabled !== true || !hostId || route === null) {
+    return native
+  }
+  // Keyed on the route: a host captures the grants its session was opened with, so a screen reused
+  // across a route change would keep authorising frames under the grants of the route the page has
+  // left. The key is what makes the change a remount, which disposes that bridge in the commit.
+  return (
+    <MobileWebShellScreen
+      key={mobileFileShellRouteKey(route)}
+      hostId={hostId}
+      route={route}
+      fallback={native}
+    />
+  )
 }
diff --git a/mobile/app/h/[hostId]/files/[worktreeId].web.tsx b/mobile/app/h/[hostId]/files/[worktreeId].web.tsx
new file mode 100644
index 00000000000..b7ee42499e4
--- /dev/null
+++ b/mobile/app/h/[hostId]/files/[worktreeId].web.tsx
@@ -0,0 +1,29 @@
+import { useLocalSearchParams } from 'expo-router'
+import { MobileFileExplorerPanel } from '../../../../src/files/MobileFileExplorerPanel'
+import { firstParam } from '../../../../src/source-control/mobile-source-control-screen-state'
+
+/**
+ * Web sibling for the file explorer.
+ *
+ * This page is what the shell renders for this route, so there is no shell to mount here and no
+ * flag to read: the switch already happened natively. Its native file also reaches
+ * OrcaMobileWebShellView, whose module calls requireNativeViewManager at import and throws in a
+ * browser, which is what the page opening this route would hit.
+ */
+export default function MobileFileExplorerScreen() {
+  // Through `firstParam`, as the native sibling does. The page reaches this route only through
+  // `init.route`, whose params are a `Record<string, string>`, so an array cannot arrive today —
+  // read the same way regardless, because the two files are meant to be the same screen and a
+  // difference between them is a difference nobody would look for.
+  const params = useLocalSearchParams<{
+    hostId?: string | string[]
+    worktreeId?: string | string[]
+    name?: string | string[]
+  }>()
+  const hostId = firstParam(params.hostId)
+  const worktreeId = firstParam(params.worktreeId)
+  const name = firstParam(params.name)
+  return (
+    <MobileFileExplorerPanel hostId={hostId} worktreeId={worktreeId} name={name} embedded={false} />
+  )
+}
diff --git a/mobile/app/h/[hostId]/files/preview/[worktreeId].tsx b/mobile/app/h/[hostId]/files/preview/[worktreeId].tsx
index df60f8fc117..6982ea9d893 100644
--- a/mobile/app/h/[hostId]/files/preview/[worktreeId].tsx
+++ b/mobile/app/h/[hostId]/files/preview/[worktreeId].tsx
@@ -1,7 +1,27 @@
 import { useLocalSearchParams } from 'expo-router'
 import { MobileFilePreviewScreen } from '../../../../../src/files/MobileFilePreviewScreen'
-import { normalizeMobileFilePreviewRouteParams } from '../../../../../src/files/mobile-file-preview-route'
+import {
+  mobileFilePreviewShellParams,
+  normalizeMobileFilePreviewRouteParams
+} from '../../../../../src/files/mobile-file-preview-route'
+import {
+  mobileFileShellRoute,
+  mobileFileShellRouteKey
+} from '../../../../../src/files/mobile-file-shell-route'
+import { MobileWebShellScreen } from '../../../../../src/mobile-web-shell/MobileWebShellScreen'
+import { useMobileWebShellEnabled } from '../../../../../src/mobile-web-shell/use-mobile-web-shell-enabled'
 
+/**
+ * The file preview, from the desktop's bundle or from this app.
+ *
+ * Normalized before the switch, not after: a route the native screen would refuse is one the shell
+ * has no pathname to build from, and its own refusal message is a better screen than a page opened
+ * on params it will refuse again.
+ *
+ * Only the two path segments are spelled into the pathname; everything else — the file path among
+ * them — is a param, which is what keeps a `/`, a space or a `..` out of the segment vocabulary the
+ * bridge holds a route to.
+ */
 export default function MobileFilePreviewRoute() {
   const params = useLocalSearchParams<{
     hostId?: string | string[]
@@ -20,5 +40,33 @@ export default function MobileFilePreviewRoute() {
     name?: string | string[]
     worktreeName?: string | string[]
   }>()
-  return <MobileFilePreviewScreen route={normalizeMobileFilePreviewRouteParams(params)} />
+  const route = normalizeMobileFilePreviewRouteParams(params)
+  const enabled = useMobileWebShellEnabled()
+  const native = <MobileFilePreviewScreen route={route} />
+
+  const shellRoute = route.ok
+    ? mobileFileShellRoute({
+        pathname: `/h/${encodeURIComponent(route.params.hostId)}/files/preview/${encodeURIComponent(
+          route.params.worktreeId
+        )}`,
+        params: mobileFilePreviewShellParams(route.params)
+      })
+    : null
+
+  if (enabled !== true || !route.ok || shellRoute === null) {
+    return native
+  }
+  // Keyed on the whole route, params included, for two reasons. A host captures the grants its
+  // session was opened with, so only a remount drops the bridge the previous route opened. And the
+  // page learns its route exactly once, from `init`: a same-path param change — another file in
+  // this worktree — would otherwise leave the shell mounted and the page still showing the file it
+  // was opened on, with nothing to tell it otherwise.
+  return (
+    <MobileWebShellScreen
+      key={mobileFileShellRouteKey(shellRoute)}
+      hostId={route.params.hostId}
+      route={shellRoute}
+      fallback={native}
+    />
+  )
 }
diff --git a/mobile/app/h/[hostId]/files/preview/[worktreeId].web.tsx b/mobile/app/h/[hostId]/files/preview/[worktreeId].web.tsx
new file mode 100644
index 00000000000..28eebe2b39c
--- /dev/null
+++ b/mobile/app/h/[hostId]/files/preview/[worktreeId].web.tsx
@@ -0,0 +1,32 @@
+import { useLocalSearchParams } from 'expo-router'
+import { MobileFilePreviewScreen } from '../../../../../src/files/MobileFilePreviewScreen'
+import { normalizeMobileFilePreviewRouteParams } from '../../../../../src/files/mobile-file-preview-route'
+
+/**
+ * Web sibling for the file preview.
+ *
+ * This page is what the shell renders for this route, so there is no shell to mount here and no
+ * flag to read: the switch already happened natively. Its native file also reaches
+ * OrcaMobileWebShellView, whose module calls requireNativeViewManager at import and throws in a
+ * browser, which is what the page opening this route would hit.
+ */
+export default function MobileFilePreviewRoute() {
+  const params = useLocalSearchParams<{
+    hostId?: string | string[]
+    worktreeId?: string | string[]
+    relativePath?: string | string[]
+    source?: string | string[]
+    absolutePath?: string | string[]
+    grantId?: string | string[]
+    terminal?: string | string[]
+    pathText?: string | string[]
+    cwd?: string | string[]
+    nativeChatTab?: string | string[]
+    nativeChatSession?: string | string[]
+    line?: string | string[]
+    column?: string | string[]
+    name?: string | string[]
+    worktreeName?: string | string[]
+  }>()
+  return <MobileFilePreviewScreen route={normalizeMobileFilePreviewRouteParams(params)} />
+}
diff --git a/mobile/src/components/mounted-bottom-drawer.tsx b/mobile/src/components/mounted-bottom-drawer.tsx
index 78d16f71770..c28cfeafd31 100644
--- a/mobile/src/components/mounted-bottom-drawer.tsx
+++ b/mobile/src/components/mounted-bottom-drawer.tsx
@@ -194,7 +194,11 @@ export function MountedBottomDrawer({
   }, [onClose, progress])
 
   useEffect(() => {
-    if (!visible || !interactive) {
+    // Native only: react-native-web's `BackHandler.addEventListener` logs "BackHandler is not
+    // supported on web and should not be used." and hands back an inert subscription, so inside the
+    // shell's page every drawer that opened put that line on the console and armed nothing. There
+    // is no hardware back to intercept in a WebView; the shell owns the one the phone has.
+    if (!visible || !interactive || Platform.OS === 'web') {
       return
     }
 
diff --git a/mobile/src/files/MobileFileExplorerPanel.tsx b/mobile/src/files/MobileFileExplorerPanel.tsx
index 84b05e0fb43..673b9b45fef 100644
--- a/mobile/src/files/MobileFileExplorerPanel.tsx
+++ b/mobile/src/files/MobileFileExplorerPanel.tsx
@@ -8,8 +8,8 @@ import {
   type ListRenderItem
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { useRouter } from 'expo-router'
 import { ChevronLeft, X } from 'lucide-react-native'
+import { useRouteHandoff } from '../navigation/route-handoff'
 import { useHostClient, useForceReconnect } from '../transport/client-context'
 import { getWorktreeLabel } from '../session/worktree-label'
 import {
@@ -41,7 +41,7 @@ export function MobileFileExplorerPanel(props: {
   onRequestClose?: () => void
 }) {
   const { hostId, worktreeId, name, embedded, onRequestClose } = props
-  const router = useRouter()
+  const router = useRouteHandoff()
   const { client, state: connState } = useHostClient(hostId)
   const forceReconnect = useForceReconnect()
   const scopeRef = useRef('')
diff --git a/mobile/src/files/MobileFilePreviewScreen.tsx b/mobile/src/files/MobileFilePreviewScreen.tsx
index 3f56890243a..b5b768ecbd2 100644
--- a/mobile/src/files/MobileFilePreviewScreen.tsx
+++ b/mobile/src/files/MobileFilePreviewScreen.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Alert, BackHandler, Pressable, Text, View, useWindowDimensions } from 'react-native'
+import { Pressable, Text, View, useWindowDimensions } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { useRouter } from 'expo-router'
 import { ChevronLeft, Save } from 'lucide-react-native'
+import { useRouteHandoff } from '../navigation/route-handoff'
 import { getWorktreeLabel } from '../session/worktree-label'
 import { colors, spacing } from '../theme/mobile-theme'
 import { useForceReconnect, useHostClient } from '../transport/client-context'
@@ -13,6 +13,7 @@ import {
   type MobileFilePreviewSource,
   type MobileFilePreviewResult
 } from './mobile-file-preview-request'
+import { ConfirmModal } from '../components/ConfirmModal'
 import { MobileFilePreviewBody } from './MobileFilePreviewBody'
 import {
   displayNameFromPreviewPath,
@@ -26,13 +27,14 @@ import {
   shouldKeepDirtyDraftOnPreviewLoadResult
 } from './mobile-file-preview-editability'
 import { filePreviewStyles as styles } from './mobile-file-preview-styles'
+import { useMobileFilePreviewBack } from './use-mobile-file-preview-back'
 
 type Props = {
   route: MobileFilePreviewRouteState
 }
 
 export function MobileFilePreviewScreen({ route }: Props) {
-  const router = useRouter()
+  const router = useRouteHandoff()
   const previewParams = route.ok ? route.params : null
   const { client, state: connState } = useHostClient(previewParams?.hostId)
   const forceReconnect = useForceReconnect()
@@ -219,22 +221,11 @@ export function MobileFilePreviewScreen({ route }: Props) {
     }
   }, [canSaveArtifact, client, draftContent, previewSource, savedContent, saving])
 
-  const requestBack = useCallback(() => {
-    if (!hasUnsavedTerminalArtifactDraft) {
-      router.back()
-      return true
-    }
-    Alert.alert('Discard changes?', 'Unsaved edits will be lost.', [
-      { text: 'Stay', style: 'cancel' },
-      { text: 'Discard', style: 'destructive', onPress: () => router.back() }
-    ])
-    return true
-  }, [hasUnsavedTerminalArtifactDraft, router])
-
-  useEffect(() => {
-    const subscription = BackHandler.addEventListener('hardwareBackPress', requestBack)
-    return () => subscription.remove()
-  }, [requestBack])
+  const leave = useCallback(() => router.back(), [router])
+  const { confirmingDiscard, requestBack, stay, discard } = useMobileFilePreviewBack({
+    hasUnsavedDraft: hasUnsavedTerminalArtifactDraft,
+    leave
+  })
 
   return (
     <View style={styles.container}>
@@ -284,6 +275,16 @@ export function MobileFilePreviewScreen({ route }: Props) {
         }
         onRetry={retry}
       />
+      <ConfirmModal
+        visible={confirmingDiscard}
+        title="Discard changes?"
+        message="Unsaved edits will be lost."
+        confirmLabel="Discard"
+        cancelLabel="Stay"
+        destructive
+        onConfirm={discard}
+        onCancel={stay}
+      />
     </View>
   )
 }
diff --git a/mobile/src/files/files-router-seam-census.test.ts b/mobile/src/files/files-router-seam-census.test.ts
new file mode 100644
index 00000000000..e1b4546ec67
--- /dev/null
+++ b/mobile/src/files/files-router-seam-census.test.ts
@@ -0,0 +1,78 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import ts from 'typescript-api'
+import { describe, expect, it } from 'vitest'
+
+const FILES_ROOT = import.meta.dirname
+
+/**
+ * Which modules here hold a router, so the census cannot pass by seeing nothing.
+ *
+ * Inside the shell's page a screen is one document standing in for one screen, and `useRouteHandoff`
+ * is the only thing that knows which targets the page keeps and which it hands back to the app. A
+ * screen holding expo-router's own `useRouter` posts no `navigate`, so a target outside the page
+ * paints Unmatched over it and a target inside it still works — which is why this is a census and
+ * not a behaviour test: the failure is invisible from either screen's own tests.
+ */
+const ROUTER_HOLDERS = ['MobileFilePreviewScreen.tsx', 'MobileFileExplorerPanel.tsx']
+
+function productFiles(): string[] {
+  return readdirSync(FILES_ROOT, { recursive: true, encoding: 'utf8' })
+    .map((entry) => entry.replaceAll('\\', '/'))
+    .filter((entry) => /\.tsx?$/.test(entry) && !/\.test\.tsx?$/.test(entry))
+}
+
+function parse(name: string): ts.SourceFile {
+  return ts.createSourceFile(
+    name,
+    readFileSync(join(FILES_ROOT, name), 'utf8'),
+    ts.ScriptTarget.Latest,
+    true,
+    name.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS
+  )
+}
+
+/** Value imports only: a `import type { Href } from 'expo-router'` names no runtime router. */
+function importsExpoRouterValue(source: ts.SourceFile): boolean {
+  return source.statements.some((statement) => {
+    if (!ts.isImportDeclaration(statement) || statement.importClause?.isTypeOnly === true) {
+      return false
+    }
+    const specifier = statement.moduleSpecifier
+    return ts.isStringLiteral(specifier) && specifier.text === 'expo-router'
+  })
+}
+
+function callsRouteHandoff(source: ts.SourceFile): boolean {
+  let found = false
+  const visit = (node: ts.Node): void => {
+    if (
+      ts.isCallExpression(node) &&
+      ts.isIdentifier(node.expression) &&
+      node.expression.text === 'useRouteHandoff'
+    ) {
+      found = true
+    }
+    ts.forEachChild(node, visit)
+  }
+  ts.forEachChild(source, visit)
+  return found
+}
+
+describe('the files domain reaches the router through the handoff seam', () => {
+  const files = productFiles()
+
+  it('walks the modules it is written against', () => {
+    expect(files).toEqual(expect.arrayContaining(ROUTER_HOLDERS))
+  })
+
+  it('imports no router from expo-router, which the page cannot hand a route back through', () => {
+    expect(files.filter((name) => importsExpoRouterValue(parse(name)))).toEqual([])
+  })
+
+  it('takes the router from useRouteHandoff at every screen that holds one', () => {
+    expect(files.filter((name) => callsRouteHandoff(parse(name))).sort()).toEqual(
+      [...ROUTER_HOLDERS].sort()
+    )
+  })
+})
diff --git a/mobile/src/files/mobile-file-path-route-encoding.test.ts b/mobile/src/files/mobile-file-path-route-encoding.test.ts
new file mode 100644
index 00000000000..31a101c15f4
--- /dev/null
+++ b/mobile/src/files/mobile-file-path-route-encoding.test.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest'
+import {
+  BRIDGE_ROUTE_HREF_PATTERN,
+  BRIDGE_ROUTE_PATHNAME_PATTERN
+} from '../mobile-web-shell/bridge/bridge-caps'
+import { shellRouteHref } from '../mobile-web-shell/bridge/page-bootstrap'
+import { stringifyRouteHref } from '../navigation/route-href'
+import { createMobileFilePreviewHref } from './mobile-file-preview-route'
+import { mobileFileShellRoute } from './mobile-file-shell-route'
+
+/**
+ * Every shape of a real file path that the bridge's route vocabulary would refuse as a segment.
+ *
+ * None of them is refused, and that is the design: the pathname spells only `hostId` and
+ * `worktreeId`, and the path itself is a param. This is the test that says so for each one rather
+ * than for a representative.
+ *
+ * What the percent-encoding is load-bearing for is narrower than "every path", and the two lists
+ * below are that split rather than a claim over the whole set. Two different rules decide it, and
+ * neither is about paths:
+ *
+ *  - the query half of `BRIDGE_ROUTE_HREF_PATTERN` is `[^#\s]*`, so it refuses whitespace of any
+ *    kind and a `#`, and admits everything else verbatim;
+ *  - the reader is `URLSearchParams`, which is form-urlencoded: it takes `&` as the end of the
+ *    pair, `+` as a space, and `%XX` as an escape.
+ *
+ * So a value needs the encoder exactly when it carries whitespace, `#`, `&`, `+`, or a `%` that
+ * begins a valid escape. A `/`, a dot segment, an `=` after the first one, a lone `%` and non-ASCII
+ * all pass both rules untouched. That is why hand-joining the query in `stringifyRouteHref` reds
+ * some of these paths and not others, and why this file pins the two groups by behaviour instead
+ * of asserting one rule over a list of paths.
+ */
+const ENCODING_LOAD_BEARING = [
+  'src/my file.ts',
+  'a%2Fb.ts',
+  'a#b.ts',
+  // `+` decodes to a space and `&` ends the pair, so both come back as a different path entirely.
+  'a+b.ts',
+  'a&b.ts',
+  // Whitespace is whitespace to the pattern, so this one is refused rather than altered.
+  'a\nb.ts'
+]
+const ENCODING_NEUTRAL = [
+  'docs/readme.md',
+  '../etc/passwd',
+  'docs/日本語.md',
+  '/logs/run.txt',
+  // Only the first `=` splits the pair, and a `%` that begins no valid escape is left alone.
+  'a=b.ts',
+  'a%b.ts'
+]
+const HAZARD_PATHS = [...ENCODING_LOAD_BEARING, ...ENCODING_NEUTRAL]
+
+/** The path as the other side reads it back out of the query it arrived in. */
+function relativePathFromHref(href: string): string | null {
+  const query = href.slice(href.indexOf('?') + 1)
+  return new URLSearchParams(query).get('relativePath')
+}
+
+describe.each(HAZARD_PATHS)('a file path the route carries: %s', (relativePath) => {
+  it('is a route the page can be given, and a pathname with no path in it', () => {
+    const route = mobileFileShellRoute({
+      pathname: '/h/host-1/files/preview/wt-1',
+      params: { relativePath, source: 'worktree' }
+    })
+    expect(route).not.toBeNull()
+    expect(BRIDGE_ROUTE_PATHNAME_PATTERN.test(route?.pathname ?? '')).toBe(true)
+  })
+
+  it('survives the href the shell writes into the page history', () => {
+    const href = shellRouteHref({
+      pathname: '/h/host-1/files/preview/wt-1',
+      params: { relativePath, source: 'worktree' }
+    })
+    expect(BRIDGE_ROUTE_HREF_PATTERN.test(href)).toBe(true)
+    expect(relativePathFromHref(href)).toBe(relativePath)
+  })
+
+  it('survives the href the page would hand back to the shell', () => {
+    const href = stringifyRouteHref(
+      createMobileFilePreviewHref({
+        hostId: 'host-1',
+        worktreeId: 'wt-1',
+        relativePath,
+        source: 'worktree'
+      })
+    )
+    expect(BRIDGE_ROUTE_HREF_PATTERN.test(href)).toBe(true)
+    expect(relativePathFromHref(href)).toBe(relativePath)
+  })
+})
+
+/**
+ * Which of the seven the encoder is the only thing standing between and a refused or altered href.
+ *
+ * Asserted by building the href the unencoded way and reading what happens to it, so the split is
+ * pinned by behaviour rather than by a comment: move a path between the two lists and this fails.
+ */
+describe('what the percent-encoding is load-bearing for', () => {
+  const rawHref = (relativePath: string) =>
+    `/h/host-1/files/preview/wt-1?relativePath=${relativePath}&source=worktree`
+
+  it.each(ENCODING_NEUTRAL)('survives the query unencoded: %s', (relativePath) => {
+    const href = rawHref(relativePath)
+    expect(BRIDGE_ROUTE_HREF_PATTERN.test(href)).toBe(true)
+    expect(relativePathFromHref(href)).toBe(relativePath)
+  })
+
+  it.each(ENCODING_LOAD_BEARING)('does not survive the query unencoded: %s', (relativePath) => {
+    const href = rawHref(relativePath)
+    const refused = !BRIDGE_ROUTE_HREF_PATTERN.test(href)
+    const altered = relativePathFromHref(href) !== relativePath
+    expect(refused || altered).toBe(true)
+  })
+})
+
+describe('what the route vocabulary does refuse', () => {
+  it('refuses the same path spelled as a segment, which is why it never is one', () => {
+    // The counterfactual the cases above depend on: if the segment rule admitted these, the
+    // encoding would not be what is keeping them safe and this file would prove nothing.
+    for (const relativePath of ['../etc/passwd', 'src/my file.ts', 'a#b.ts']) {
+      expect(BRIDGE_ROUTE_PATHNAME_PATTERN.test(`/h/host-1/files/preview/${relativePath}`)).toBe(
+        false
+      )
+    }
+  })
+
+  it('refuses a fragment even in the query half, so a path carrying one has to be encoded', () => {
+    expect(BRIDGE_ROUTE_HREF_PATTERN.test('/h/host-1/files/preview/wt-1?relativePath=a#b.ts')).toBe(
+      false
+    )
+  })
+})
diff --git a/mobile/src/files/mobile-file-preview-route.test.ts b/mobile/src/files/mobile-file-preview-route.test.ts
index 784313464ee..eb35319af99 100644
--- a/mobile/src/files/mobile-file-preview-route.test.ts
+++ b/mobile/src/files/mobile-file-preview-route.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   createMobileFilePreviewHref,
   displayNameFromPreviewPath,
+  mobileFilePreviewShellParams,
   normalizeMobileFilePreviewRouteParams
 } from './mobile-file-preview-route'
 
@@ -132,6 +133,57 @@ describe('mobile-file-preview-route', () => {
     })
   })
 
+  it('hands the shell every param but the two the pathname spells as segments', () => {
+    expect(
+      mobileFilePreviewShellParams({
+        hostId: 'host-1',
+        worktreeId: 'wt-1',
+        relativePath: 'docs/my notes/readme.md',
+        source: 'worktree',
+        line: '12'
+      })
+    ).toEqual({ relativePath: 'docs/my notes/readme.md', source: 'worktree', line: '12' })
+  })
+
+  it('leaves an absent param out rather than sending it empty', () => {
+    // Driven through the normalizer because that is the only producer: it sets every optional key,
+    // so `line` is present with an `undefined` value rather than missing, and a literal written by
+    // hand here would omit the key and test nothing. The page reads these back through
+    // useLocalSearchParams, where a key present and empty is a different answer from one that was
+    // never there: `line: ''` scrolls nowhere, `line` absent opens the file at the top.
+    const route = normalizeMobileFilePreviewRouteParams({
+      hostId: 'host-1',
+      worktreeId: 'wt-1',
+      relativePath: 'readme.md'
+    })
+    if (!route.ok) {
+      throw new Error(route.message)
+    }
+    expect('line' in route.params).toBe(true)
+    expect(mobileFilePreviewShellParams(route.params)).toEqual({
+      relativePath: 'readme.md',
+      source: 'worktree'
+    })
+  })
+
+  it('carries a terminal artifact by its absolute path, which is not a segment either', () => {
+    expect(
+      mobileFilePreviewShellParams({
+        hostId: 'host-1',
+        worktreeId: 'wt-1',
+        source: 'terminalArtifact',
+        absolutePath: '/logs/run 1.txt',
+        grantId: 'grant-1',
+        cwd: '/logs'
+      })
+    ).toEqual({
+      source: 'terminalArtifact',
+      absolutePath: '/logs/run 1.txt',
+      grantId: 'grant-1',
+      cwd: '/logs'
+    })
+  })
+
   it('derives display names from slash or backslash paths only for display', () => {
     expect(displayNameFromPreviewPath('src/app.ts')).toBe('app.ts')
     expect(displayNameFromPreviewPath('src\\app.ts')).toBe('app.ts')
diff --git a/mobile/src/files/mobile-file-preview-route.ts b/mobile/src/files/mobile-file-preview-route.ts
index f0e7dfbbf49..e1e897bdb37 100644
--- a/mobile/src/files/mobile-file-preview-route.ts
+++ b/mobile/src/files/mobile-file-preview-route.ts
@@ -107,6 +107,21 @@ export function normalizeMobileFilePreviewRouteParams(
   }
 }
 
+/**
+ * The params the shell hands the page, which are this route's own minus the two it spells as path
+ * segments. Every value is a `string`, because that is what `BridgeInitRoute.params` carries and
+ * what `URLSearchParams` will encode it back out of; an absent one is left out rather than sent
+ * empty, so the page's `useLocalSearchParams` reads exactly what the native screen read.
+ */
+export function mobileFilePreviewShellParams(
+  params: MobileFilePreviewRouteParams
+): Record<string, string> {
+  const { hostId: _hostId, worktreeId: _worktreeId, ...rest } = params
+  return Object.fromEntries(
+    Object.entries(rest).flatMap(([key, value]) => (value === undefined ? [] : [[key, value]]))
+  )
+}
+
 export function createMobileFilePreviewHref(
   params: MobileFilePreviewRouteParams
 ): MobileFilePreviewHref {
diff --git a/mobile/src/files/mobile-file-shell-route.test.ts b/mobile/src/files/mobile-file-shell-route.test.ts
new file mode 100644
index 00000000000..2beeaede98e
--- /dev/null
+++ b/mobile/src/files/mobile-file-shell-route.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { BRIDGE_MAX_ROUTE_PARAM_CHARS } from '../mobile-web-shell/bridge/bridge-caps'
+import {
+  BridgeInitRouteSchema,
+  type BridgeInitRoute
+} from '../mobile-web-shell/bridge/bridge-envelope'
+import { shellRouteHref } from '../mobile-web-shell/bridge/page-bootstrap'
+import { mobileFileShellRoute, mobileFileShellRouteKey } from './mobile-file-shell-route'
+import {
+  mobileFilePreviewShellParams,
+  normalizeMobileFilePreviewRouteParams
+} from './mobile-file-preview-route'
+
+const PREVIEW_PATH = '/h/host-1/files/preview/wt-1'
+
+function previewRoute(absolutePath: string) {
+  const route = normalizeMobileFilePreviewRouteParams({
+    hostId: 'host-1',
+    worktreeId: 'wt-1',
+    source: 'terminalArtifact',
+    absolutePath,
+    grantId: 'grant-1'
+  })
+  if (!route.ok) {
+    throw new Error(route.message)
+  }
+  return { pathname: PREVIEW_PATH, params: mobileFilePreviewShellParams(route.params) }
+}
+
+describe('the route the files screens hand the shell', () => {
+  it('is one the page could actually be given', () => {
+    const route = previewRoute('/logs/run.txt')
+    expect(BridgeInitRouteSchema.safeParse(route).success).toBe(true)
+    expect(mobileFileShellRoute(route)).toEqual(route)
+  })
+
+  it('is nothing when a file path is longer than a param may be', () => {
+    // Not hypothetical: this is the shape a Windows long path arrives in, and the first assertion
+    // is what says the schema really refuses it. Without the guard the screen hands it over,
+    // bridge-host drops the route to null, and the page paints "Update Orca to open this
+    // workspace" over a native screen that works.
+    const route = previewRoute(`/logs/${'a'.repeat(BRIDGE_MAX_ROUTE_PARAM_CHARS)}.txt`)
+    expect(BridgeInitRouteSchema.safeParse(route).success).toBe(false)
+    expect(mobileFileShellRoute(route)).toBeNull()
+  })
+
+  it('is nothing when a worktree id is not a segment the page will route', () => {
+    // The C1.8 class: `..` survives encodeURIComponent, and the page resolves a dot segment out of
+    // the `/h/` prefix it is supposed to stay inside.
+    const route = { pathname: '/h/host-1/files/..', params: { name: 'Files' } }
+    // The schema first, as the length case does: without it a `null` here would also be what a
+    // guard that refused everything produces.
+    expect(BridgeInitRouteSchema.safeParse(route).success).toBe(false)
+    expect(mobileFileShellRoute(route)).toBeNull()
+  })
+
+  it('keeps a path with a slash, a space and a dot segment, which are params and not segments', () => {
+    const route = {
+      pathname: '/h/host-1/files/preview/wt-1',
+      params: { relativePath: 'docs/../my notes/readme.md', source: 'worktree' }
+    }
+    expect(mobileFileShellRoute(route)).toEqual(route)
+  })
+})
+
+describe('the key a shell screen remounts on', () => {
+  /**
+   * The key has to be the URL the page would end up at, because that is what it would be showing.
+   * `shellRouteHref` is the page's own serializer and cannot be imported into a native route file —
+   * it lives beside the page's RPC client — so the copy is pinned equal here rather than trusted.
+   */
+  it.each<BridgeInitRoute>([
+    { pathname: '/h/host-1/files/wt-1' },
+    { pathname: '/h/host-1/files/wt-1', params: { name: 'my worktree' } },
+    {
+      pathname: '/h/host-1/files/preview/wt-1',
+      params: { relativePath: 'docs/my notes/readme.md', source: 'worktree', line: '12' }
+    }
+  ])('is the href the page would write into its history: %o', (route) => {
+    expect(mobileFileShellRouteKey(route)).toBe(shellRouteHref(route))
+  })
+})
diff --git a/mobile/src/files/mobile-file-shell-route.ts b/mobile/src/files/mobile-file-shell-route.ts
new file mode 100644
index 00000000000..0c00505d35f
--- /dev/null
+++ b/mobile/src/files/mobile-file-shell-route.ts
@@ -0,0 +1,47 @@
+import {
+  BridgeInitRouteSchema,
+  type BridgeInitRoute
+} from '../mobile-web-shell/bridge/bridge-envelope'
+
+/**
+ * The route to hand the shell, or nothing if the page could not be given it.
+ *
+ * `bridge-host.ts` parses the route against this same schema and drops it to `null` when it fails,
+ * so a route that does not fit reaches the phone as an `init` naming no screen — and the page
+ * answers that with "Update Orca to open this workspace", which is both wrong and worse than the
+ * native screen sitting right behind the switch. Deciding here instead means the route stays
+ * native, which is where every route starts.
+ *
+ * A file path is the reason this domain needs it. Paths are params, not segments, so `/`, spaces
+ * and `..` are all fine; length is not bounded by anything the user cannot exceed, and
+ * `BRIDGE_MAX_ROUTE_PARAM_CHARS` is 1024 while a Windows long path is not. The same call also
+ * catches a `worktreeId` the segment rule refuses, which is the C1.8 class.
+ *
+ * The schema itself is the predicate rather than a copy of its bounds: two spellings of one rule
+ * drift, and the half that matters is the half the page reads. This belongs in the shell beside
+ * that schema; it lives here while the contract files are the C2 lane's.
+ */
+export function mobileFileShellRoute(route: BridgeInitRoute): BridgeInitRoute | null {
+  return BridgeInitRouteSchema.safeParse(route).success ? route : null
+}
+
+/**
+ * The identity of a route as the page will experience it, which is what a shell screen keys on.
+ *
+ * The pathname is not enough. The page learns its route exactly once, from `init`, and writes it
+ * into its own history before the first render; nothing later tells it the route moved. So a
+ * same-path param change — another file in the same worktree, a different `name` — leaves the
+ * shell and its bridge host mounted, the page still showing the file it was opened on, and the
+ * host answering any later `init` with whatever route it now holds. Keying on the params as well
+ * makes that change a remount, which is the only thing that hands the page a new route.
+ *
+ * Serialized the same way the page's own bootstrap serializes it, so two routes that would put the
+ * same URL in the page's history are the same key. Deliberately not imported from there:
+ * `shellRouteHref` lives in `page-bootstrap.ts`, which reaches the page's RPC client and its
+ * document channel, and a native route file must not pull those into the app. The test pins the
+ * two equal instead, which is the dependency this comment actually has.
+ */
+export function mobileFileShellRouteKey(route: BridgeInitRoute): string {
+  const search = new URLSearchParams(route.params ?? {}).toString()
+  return search === '' ? route.pathname : `${route.pathname}?${search}`
+}
diff --git a/mobile/src/files/use-mobile-file-preview-back.test.ts b/mobile/src/files/use-mobile-file-preview-back.test.ts
new file mode 100644
index 00000000000..43852fa78b4
--- /dev/null
+++ b/mobile/src/files/use-mobile-file-preview-back.test.ts
@@ -0,0 +1,154 @@
+import { createElement } from 'react'
+import { act, create, type ReactTestRenderer } from 'react-test-renderer'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const native = vi.hoisted(() => {
+  // Annotated rather than asserted: the literal alone narrows to 'ios' and the tests reassign it.
+  const platform: { os: 'ios' | 'android' | 'web' } = { os: 'ios' }
+  return {
+    platform,
+    addEventListener: vi.fn((_event: string, _handler: () => boolean) => ({ remove: vi.fn() }))
+  }
+})
+
+vi.mock('react-native', () => ({
+  BackHandler: {
+    addEventListener: (event: string, handler: () => boolean) =>
+      native.addEventListener(event, handler)
+  },
+  get Platform() {
+    return { OS: native.platform.os }
+  }
+}))
+
+import {
+  useMobileFilePreviewBack,
+  type MobileFilePreviewBack
+} from './use-mobile-file-preview-back'
+
+const held: { back: MobileFilePreviewBack | null } = { back: null }
+
+function Screen({ hasUnsavedDraft, leave }: { hasUnsavedDraft: boolean; leave: () => void }): null {
+  held.back = useMobileFilePreviewBack({ hasUnsavedDraft, leave })
+  return null
+}
+
+function render(hasUnsavedDraft: boolean, leave: () => void): ReactTestRenderer {
+  let renderer: ReactTestRenderer | null = null
+  act(() => {
+    renderer = create(createElement(Screen, { hasUnsavedDraft, leave }))
+  })
+  if (!renderer) {
+    throw new Error('the probe did not render')
+  }
+  return renderer
+}
+
+beforeEach(() => {
+  native.platform.os = 'ios'
+  native.addEventListener.mockClear()
+  held.back = null
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('leaving the file preview', () => {
+  it('leaves straight away when there is nothing to lose', () => {
+    const leave = vi.fn()
+    render(false, leave)
+    act(() => {
+      expect(held.back?.requestBack()).toBe(true)
+    })
+    expect(leave).toHaveBeenCalledTimes(1)
+    expect(held.back?.confirmingDiscard).toBe(false)
+  })
+
+  it('asks before dropping an unsaved draft, and does not leave while it is asking', () => {
+    const leave = vi.fn()
+    render(true, leave)
+    act(() => {
+      expect(held.back?.requestBack()).toBe(true)
+    })
+    expect(leave).not.toHaveBeenCalled()
+    expect(held.back?.confirmingDiscard).toBe(true)
+  })
+
+  it('stays on the answer to stay', () => {
+    const leave = vi.fn()
+    render(true, leave)
+    act(() => {
+      held.back?.requestBack()
+    })
+    act(() => {
+      held.back?.stay()
+    })
+    expect(held.back?.confirmingDiscard).toBe(false)
+    expect(leave).not.toHaveBeenCalled()
+  })
+
+  it('leaves once, on the answer to discard', () => {
+    const leave = vi.fn()
+    render(true, leave)
+    act(() => {
+      held.back?.requestBack()
+    })
+    act(() => {
+      held.back?.discard()
+    })
+    expect(held.back?.confirmingDiscard).toBe(false)
+    expect(leave).toHaveBeenCalledTimes(1)
+  })
+
+  it('drops the question when the draft it was about is gone', () => {
+    // A save lands while the prompt is up: there is nothing left to discard, and a prompt still
+    // offering to throw work away would be offering to throw away nothing.
+    const leave = vi.fn()
+    const renderer = render(true, leave)
+    act(() => {
+      held.back?.requestBack()
+    })
+    expect(held.back?.confirmingDiscard).toBe(true)
+    act(() => {
+      renderer.update(createElement(Screen, { hasUnsavedDraft: false, leave }))
+    })
+    expect(held.back?.confirmingDiscard).toBe(false)
+    expect(leave).not.toHaveBeenCalled()
+  })
+
+  it('does not re-show itself on the next edit after a save', () => {
+    // `asking` outlives the draft it was about unless something clears it: with the prompt up, a
+    // save makes `hasUnsavedDraft` false and the prompt hides, but the flag is still set, so the
+    // very next edit puts the prompt back with no Back request behind it.
+    const leave = vi.fn()
+    const renderer = render(true, leave)
+    act(() => {
+      held.back?.requestBack()
+    })
+    expect(held.back?.confirmingDiscard).toBe(true)
+    // The save lands: nothing left to discard.
+    act(() => {
+      renderer.update(createElement(Screen, { hasUnsavedDraft: false, leave }))
+    })
+    expect(held.back?.confirmingDiscard).toBe(false)
+    // The next edit. Nobody asked to leave, so nobody should be asked about it.
+    act(() => {
+      renderer.update(createElement(Screen, { hasUnsavedDraft: true, leave }))
+    })
+    expect(held.back?.confirmingDiscard).toBe(false)
+    expect(leave).not.toHaveBeenCalled()
+  })
+
+  it('arms the hardware back press natively', () => {
+    render(false, vi.fn())
+    expect(native.addEventListener).toHaveBeenCalledTimes(1)
+    expect(native.addEventListener.mock.calls[0]?.[0]).toBe('hardwareBackPress')
+  })
+
+  it('never arms it on the web, where it is inert and says so on the console', () => {
+    native.platform.os = 'web'
+    render(false, vi.fn())
+    expect(native.addEventListener).not.toHaveBeenCalled()
+  })
+})
diff --git a/mobile/src/files/use-mobile-file-preview-back.ts b/mobile/src/files/use-mobile-file-preview-back.ts
new file mode 100644
index 00000000000..d69bd54788a
--- /dev/null
+++ b/mobile/src/files/use-mobile-file-preview-back.ts
@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react'
+import { BackHandler, Platform } from 'react-native'
+
+export type MobileFilePreviewBack = {
+  /** Whether the screen is asking about an unsaved draft instead of leaving. */
+  confirmingDiscard: boolean
+  /** Returns true when it handled the request, which is what a hardware back press reads. */
+  requestBack: () => boolean
+  stay: () => void
+  discard: () => void
+}
+
+/**
+ * Leaving the preview, and the one question that can stop it.
+ *
+ * The prompt is a `ConfirmModal` rather than `Alert.alert`, because React Native Web's `Alert` is
+ * `static alert() {}` — a silent no-op. Inside the shell's page that turned Back with an unsaved
+ * draft into a button that did nothing at all: no prompt, and no navigation either.
+ *
+ * `ConfirmModal` is what every other confirm in this app uses, and it keeps the modal semantics the
+ * native screen had before the page existed. It is a `BottomDrawer`, which C3 first wrote around
+ * because C1.9 had Reanimated's animated styles never reaching the DOM node on WKWebView; C1.10
+ * (`b7c06900e2`) fixed that by giving the mapper hooks a dependency array, and the drawer render
+ * check now holds it on WebKit as well as Chromium.
+ *
+ * Hardware back is registered natively only. React Native Web's `BackHandler.addEventListener`
+ * logs "BackHandler is not supported on web and should not be used." and returns an inert
+ * subscription, so on web this guard never armed regardless, and skipping it states the
+ * degradation instead of hiding it. Android back inside the page therefore pops the native stack
+ * without this prompt — the page's own Back control is where the prompt lives.
+ *
+ * Skipping it here does not keep that line off the console on its own: `mounted-bottom-drawer.tsx`
+ * registered one of its own whenever a drawer was visible and interactive, so the prompt opening
+ * put it there anyway. That registration is platform-gated now too, at the drawer, which is where
+ * it belongs; the files render check holds both by asserting the line's absence after the prompt
+ * is open.
+ */
+export function useMobileFilePreviewBack(options: {
+  hasUnsavedDraft: boolean
+  leave: () => void
+}): MobileFilePreviewBack {
+  const { hasUnsavedDraft, leave } = options
+  const [asking, setAsking] = useState(false)
+  const [askedAbout, setAskedAbout] = useState(hasUnsavedDraft)
+
+  // Adjusted during render, not in an effect: an effect that answered this would paint one frame
+  // still asking, which is the shape React Doctor names.
+  //
+  // The request belongs to the draft it was made about. `asking && hasUnsavedDraft` hides the
+  // prompt when a save or a revert empties the draft, but on its own it leaves the flag set, so
+  // the next edit put the prompt back with no Back request behind it. Dropping the request when
+  // the draft goes is what ends it with the thing it was about.
+  if (askedAbout !== hasUnsavedDraft) {
+    setAskedAbout(hasUnsavedDraft)
+    if (!hasUnsavedDraft) {
+      setAsking(false)
+    }
+  }
+
+  const confirmingDiscard = asking && hasUnsavedDraft
+
+  const requestBack = useCallback(() => {
+    if (hasUnsavedDraft) {
+      setAsking(true)
+      return true
+    }
+    leave()
+    return true
+  }, [hasUnsavedDraft, leave])
+
+  const stay = useCallback(() => setAsking(false), [])
+
+  const discard = useCallback(() => {
+    setAsking(false)
+    leave()
+  }, [leave])
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      return
+    }
+    const subscription = BackHandler.addEventListener('hardwareBackPress', requestBack)
+    return () => subscription.remove()
+  }, [requestBack])
+
+  return { confirmingDiscard, requestBack, stay, discard }
+}
diff --git a/mobile/src/mobile-web-shell/mobile-web-shell-files-route.test.tsx b/mobile/src/mobile-web-shell/mobile-web-shell-files-route.test.tsx
new file mode 100644
index 00000000000..3670ce0af41
--- /dev/null
+++ b/mobile/src/mobile-web-shell/mobile-web-shell-files-route.test.tsx
@@ -0,0 +1,277 @@
+import { createElement } from 'react'
+import { act, create } from 'react-test-renderer'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+type RouteDependencies = {
+  storage: Map<string, string>
+  routes: { pathname: string; params?: Record<string, string> }[]
+  panels: { hostId: string; worktreeId: string; name?: string }[]
+  previews: unknown[]
+  /** `mount:<pathname>` / `unmount:<pathname>`, which is the only thing that tells a remount from
+   *  a prop update — and a remount is what drops the old session's bridge and its grants. */
+  lifecycle: string[]
+  params: Record<string, string | string[] | undefined>
+}
+
+const dependencies = vi.hoisted((): RouteDependencies => ({
+  storage: new Map(),
+  routes: [],
+  panels: [],
+  previews: [],
+  lifecycle: [],
+  params: {}
+}))
+
+vi.mock('@react-native-async-storage/async-storage', () => ({
+  default: {
+    getItem: async (key: string) => dependencies.storage.get(key) ?? null,
+    setItem: async (key: string, value: string) => {
+      dependencies.storage.set(key, value)
+    }
+  }
+}))
+
+vi.mock('expo-router', () => ({ useLocalSearchParams: () => dependencies.params }))
+
+// `firstParam` lives in the source-control barrel, which imports two dozen icons from a 1.14.0
+// lucide barrel that re-exports a `LucideProvider` its own context.mjs does not have. Metro and the
+// web builder each paper over it; nothing under test here renders an icon, so any name will do.
+vi.mock('lucide-react-native', () => ({
+  ArrowDown: vi.fn(),
+  ArrowDownUp: vi.fn(),
+  ArrowUp: vi.fn(),
+  Check: vi.fn(),
+  CloudUpload: vi.fn(),
+  GitBranch: vi.fn(),
+  GitPullRequestArrow: vi.fn(),
+  History: vi.fn(),
+  RefreshCw: vi.fn()
+}))
+
+vi.mock('../files/MobileFileExplorerPanel', () => ({
+  MobileFileExplorerPanel: (props: { hostId: string; worktreeId: string; name?: string }) => {
+    dependencies.panels.push(props)
+    return null
+  }
+}))
+
+vi.mock('../files/MobileFilePreviewScreen', () => ({
+  MobileFilePreviewScreen: (props: unknown) => {
+    dependencies.previews.push(props)
+    return null
+  }
+}))
+
+vi.mock('./MobileWebShellScreen', async () => {
+  const React = await import('react')
+  return {
+    MobileWebShellScreen: (props: {
+      hostId: string
+      route: { pathname: string; params?: Record<string, string> }
+    }) => {
+      dependencies.routes.push(props.route)
+      // Empty deps on purpose: keyed on the pathname this would re-fire on a prop update and read
+      // exactly like a remount, which is the one thing it exists to tell apart.
+      const mountedAs = React.useRef(props.route.pathname)
+      React.useEffect(() => {
+        const pathname = mountedAs.current
+        dependencies.lifecycle.push(`mount:${pathname}`)
+        return () => {
+          dependencies.lifecycle.push(`unmount:${pathname}`)
+        }
+      }, [])
+      return null
+    }
+  }
+})
+
+import { BRIDGE_ROUTE_PATHNAME_PATTERN } from './bridge/bridge-caps'
+import MobileFileExplorerScreen from '../../app/h/[hostId]/files/[worktreeId]'
+import MobileFilePreviewRoute from '../../app/h/[hostId]/files/preview/[worktreeId]'
+
+async function renderExplorer(): Promise<void> {
+  await act(async () => {
+    create(createElement(MobileFileExplorerScreen))
+  })
+}
+
+async function renderPreview(): Promise<void> {
+  await act(async () => {
+    create(createElement(MobileFilePreviewRoute))
+  })
+}
+
+beforeEach(() => {
+  dependencies.storage.clear()
+  dependencies.routes.length = 0
+  dependencies.panels.length = 0
+  dependencies.previews.length = 0
+  dependencies.lifecycle.length = 0
+  dependencies.params = { hostId: 'host-1', worktreeId: 'wt-1', name: 'my worktree' }
+  Object.assign(globalThis, { __DEV__: true })
+  dependencies.storage.set('orca:mobileWebShellEnabled', 'true')
+})
+
+describe('the native file explorer route that hands off to the shell', () => {
+  it('opens the shell on this screen, with the name as the search half', async () => {
+    await renderExplorer()
+    expect(dependencies.routes).toEqual([
+      { pathname: '/h/host-1/files/wt-1', params: { name: 'my worktree' } }
+    ])
+  })
+
+  it('renders the native panel while the flag read is still settling', async () => {
+    await renderExplorer()
+    expect(dependencies.panels[0]).toEqual({
+      hostId: 'host-1',
+      worktreeId: 'wt-1',
+      name: 'my worktree',
+      embedded: false
+    })
+  })
+
+  /**
+   * A repeated query key, which expo-router answers with an array.
+   *
+   * A bare read puts that array straight into a template, where `String(['a','b'])` is `a,b` and
+   * `encodeURIComponent` makes it `a%2Cb` — one segment, so the bridge's segment rule accepts it
+   * and the shell opens a page for a host that does not exist. `firstParam` is what the other
+   * switches read through, and it takes the first value the way the native screen below does.
+   */
+  it('takes the first value of a repeated param, not the joined array', async () => {
+    dependencies.params = {
+      hostId: ['host-a', 'host-b'],
+      worktreeId: ['wt-1', 'wt-2'],
+      name: ['first', 'second']
+    }
+    await renderExplorer()
+    expect(dependencies.routes).toEqual([
+      { pathname: '/h/host-a/files/wt-1', params: { name: 'first' } }
+    ])
+    const pathname = dependencies.routes[0]?.pathname ?? ''
+    expect(pathname).not.toContain('%2C')
+    expect(BRIDGE_ROUTE_PATHNAME_PATTERN.test(pathname)).toBe(true)
+  })
+
+  it('stays native for a dot-segment id the bridge would refuse', async () => {
+    for (const hostId of ['.', '..']) {
+      dependencies.params = { hostId, worktreeId: 'wt-1' }
+      dependencies.routes.length = 0
+      await renderExplorer()
+      expect(dependencies.routes, hostId).toEqual([])
+    }
+  })
+
+  it('encodes both dynamic segments, so a deep-linked id stays one segment each', async () => {
+    for (const hostId of ['a?b', 'a#b', 'a b', 'a/b', 'a\\b']) {
+      dependencies.params = { hostId, worktreeId: 'wt/1' }
+      dependencies.routes.length = 0
+      await renderExplorer()
+      const pathname = dependencies.routes[0]?.pathname ?? ''
+      expect(pathname, hostId).toBe(
+        `/h/${encodeURIComponent(hostId)}/files/${encodeURIComponent('wt/1')}`
+      )
+      expect(BRIDGE_ROUTE_PATHNAME_PATTERN.test(pathname), hostId).toBe(true)
+    }
+  })
+
+  it('renders the native panel with the flag off, which is every store build', async () => {
+    dependencies.storage.set('orca:mobileWebShellEnabled', 'false')
+    await renderExplorer()
+    expect(dependencies.routes).toEqual([])
+  })
+
+  /**
+   * A route change is a new session, and the old one's bridge must not outlive it.
+   *
+   * The host captures the grants its session was opened with, so a screen reused across a route
+   * change keeps authorising frames under the grants of the route the page has left. Only a
+   * remount drops it, and only a key guarantees one.
+   */
+  it('remounts the shell when the route changes rather than updating it', async () => {
+    let renderer: ReturnType<typeof create> | null = null
+    await act(async () => {
+      renderer = create(createElement(MobileFileExplorerScreen))
+    })
+    dependencies.params = { hostId: 'host-2', worktreeId: 'wt-9' }
+    await act(async () => {
+      renderer?.update(createElement(MobileFileExplorerScreen))
+    })
+    expect(dependencies.lifecycle).toEqual([
+      'mount:/h/host-1/files/wt-1',
+      'unmount:/h/host-1/files/wt-1',
+      'mount:/h/host-2/files/wt-9'
+    ])
+  })
+
+  it('remounts when only a param changes, which the page has no other way to learn', async () => {
+    // The page reads its route once, out of `init`. Same pathname, different label: without the
+    // params in the key the shell stays mounted and the page never hears about it.
+    let renderer: ReturnType<typeof create> | null = null
+    await act(async () => {
+      renderer = create(createElement(MobileFileExplorerScreen))
+    })
+    dependencies.params = { hostId: 'host-1', worktreeId: 'wt-1', name: 'renamed' }
+    await act(async () => {
+      renderer?.update(createElement(MobileFileExplorerScreen))
+    })
+    expect(dependencies.lifecycle).toEqual([
+      'mount:/h/host-1/files/wt-1',
+      'unmount:/h/host-1/files/wt-1',
+      'mount:/h/host-1/files/wt-1'
+    ])
+  })
+})
+
+describe('the native file preview route that hands off to the shell', () => {
+  beforeEach(() => {
+    dependencies.params = {
+      hostId: 'host-1',
+      worktreeId: 'wt-1',
+      relativePath: 'docs/readme.md'
+    }
+  })
+
+  it('opens the shell on this screen, with the file path as a param', async () => {
+    await renderPreview()
+    expect(dependencies.routes).toEqual([
+      {
+        pathname: '/h/host-1/files/preview/wt-1',
+        params: { relativePath: 'docs/readme.md', source: 'worktree' }
+      }
+    ])
+  })
+
+  it('remounts for another file in the same worktree, which keeps the pathname', async () => {
+    let renderer: ReturnType<typeof create> | null = null
+    await act(async () => {
+      renderer = create(createElement(MobileFilePreviewRoute))
+    })
+    dependencies.params = { hostId: 'host-1', worktreeId: 'wt-1', relativePath: 'docs/other.md' }
+    await act(async () => {
+      renderer?.update(createElement(MobileFilePreviewRoute))
+    })
+    expect(dependencies.lifecycle).toEqual([
+      'mount:/h/host-1/files/preview/wt-1',
+      'unmount:/h/host-1/files/preview/wt-1',
+      'mount:/h/host-1/files/preview/wt-1'
+    ])
+    expect(dependencies.routes.at(-1)?.params?.relativePath).toBe('docs/other.md')
+  })
+
+  it('remounts the shell when the route changes rather than updating it', async () => {
+    let renderer: ReturnType<typeof create> | null = null
+    await act(async () => {
+      renderer = create(createElement(MobileFilePreviewRoute))
+    })
+    dependencies.params = { hostId: 'host-2', worktreeId: 'wt-9', relativePath: 'a.md' }
+    await act(async () => {
+      renderer?.update(createElement(MobileFilePreviewRoute))
+    })
+    expect(dependencies.lifecycle).toEqual([
+      'mount:/h/host-1/files/preview/wt-1',
+      'unmount:/h/host-1/files/preview/wt-1',
+      'mount:/h/host-2/files/preview/wt-9'
+    ])
+  })
+})
diff --git a/mobile/src/mobile-web-shell/mobile-web-shell-flag-census.test.ts b/mobile/src/mobile-web-shell/mobile-web-shell-flag-census.test.ts
index c901be199bd..2ed1917c948 100644
--- a/mobile/src/mobile-web-shell/mobile-web-shell-flag-census.test.ts
+++ b/mobile/src/mobile-web-shell/mobile-web-shell-flag-census.test.ts
@@ -17,8 +17,16 @@ const ROUTE = 'app/h/[hostId]/web.tsx'
 const HOST_ROUTE = 'app/h/[hostId]/index.tsx'
 const AGENT_HISTORY_ROUTE = 'app/h/[hostId]/agent-history/[worktreeId].tsx'
 const TASKS_ROUTE = 'app/h/[hostId]/tasks.tsx'
+const FILES_ROUTE = 'app/h/[hostId]/files/[worktreeId].tsx'
+const FILES_PREVIEW_ROUTE = 'app/h/[hostId]/files/preview/[worktreeId].tsx'
 /** One entry per screen the flag can switch to the page, which is what a review reads. */
-const SWITCHED_ROUTES = [HOST_ROUTE, AGENT_HISTORY_ROUTE, TASKS_ROUTE]
+const SWITCHED_ROUTES = [
+  HOST_ROUTE,
+  AGENT_HISTORY_ROUTE,
+  TASKS_ROUTE,
+  FILES_ROUTE,
+  FILES_PREVIEW_ROUTE
+]
 const DEVELOPER_ROW = 'src/diagnostics/mobile-web-shell-dev-row.tsx'
 /** Every tree that ships in the app bundle, with the floor each must clear. `modules` is two files,
  *  but it is where the native view lives and so the easiest place for a second reader to hide. */
@@ -57,9 +65,9 @@ describe('who touches the hybrid shell flag', () => {
     expect(paths).toContain(DEFINITION)
     expect(paths).toContain(FLAG_HOOK)
     expect(paths).toContain(ROUTE)
-    expect(paths).toContain(HOST_ROUTE)
-    expect(paths).toContain(AGENT_HISTORY_ROUTE)
-    expect(paths).toContain(TASKS_ROUTE)
+    for (const route of SWITCHED_ROUTES) {
+      expect(paths).toContain(route)
+    }
     expect(paths).toContain(DEVELOPER_ROW)
     expect(paths).toContain(SHELL_VIEW)
     const trees = Object.keys(TREES)
@@ -82,7 +90,9 @@ describe('who touches the hybrid shell flag', () => {
   it('reaches the switched routes through that hook and no others', () => {
     // Each switched route is a screen the flag decides the renderer of, and one more is one more
     // place a dark feature could turn itself on. The list grows once per domain series, in the PR
-    // that lists the route in MOBILE_WEB_PAGE_ROUTES, and never as a side effect of anything else.
+    // that switches the route file to MobileWebShellScreen, and never as a side effect of anything
+    // else. A switched route is inert until MOBILE_WEB_PAGE_ROUTES lists it as well, so an entry
+    // here can land a PR ahead of that one.
     expect(filesContaining('useMobileWebShellEnabled')).toEqual(
       [FLAG_HOOK, ROUTE, ...SWITCHED_ROUTES].sort()
     )
diff --git a/mobile/src/platform/haptics.web.ts b/mobile/src/platform/haptics.web.ts
new file mode 100644
index 00000000000..2053f00ede6
--- /dev/null
+++ b/mobile/src/platform/haptics.web.ts
@@ -0,0 +1,24 @@
+/**
+ * Haptics inside the shell's page: nothing at all.
+ *
+ * expo-haptics has a web build, and that is the problem rather than the solution. With no
+ * `navigator.vibrate` — iOS Safari, which is the WebView the page runs in — it fakes a haptic by
+ * appending a hidden `<label><input type="checkbox" switch>` to `document.head`, clicking it, and
+ * removing it again, once per call. C1.9 traced a long press that never fired on the worktree list
+ * to exactly that stray click, and the file explorer calls `triggerSelection` on every row tap.
+ *
+ * So the page has no haptics. A phone holding the page is a phone whose native app is right there
+ * with the real ones, and a missing tap feedback is worth less than a tap that does not register.
+ *
+ * Same five names as the native file, because that is what makes this a substitution: an export
+ * added there and missing here is a build error in the bundle, not a silent no-op.
+ */
+export function triggerMediumImpact(): void {}
+
+export function triggerSelection(): void {}
+
+export function triggerSuccess(): void {}
+
+export function triggerError(): void {}
+
+export function triggerEdgeBump(): void {}
diff --git a/mobile/web-entry/web-overrides.json b/mobile/web-entry/web-overrides.json
index 51b61b2f460..ce10822ea79 100644
--- a/mobile/web-entry/web-overrides.json
+++ b/mobile/web-entry/web-overrides.json
@@ -25,6 +25,18 @@
       "file": "app/h/[hostId]/index.web.tsx",
       "reason": "The shell renders this page for this route, so the page has no shell to mount inside itself and no flag to read; the switch already happened natively. Its native file reaches OrcaMobileWebShellView, whose requireNativeViewManager call runs at import and throws in a browser."
     },
+    {
+      "file": "src/platform/haptics.web.ts",
+      "reason": "expo-haptics has a web build that fakes an iOS haptic by appending a hidden <label><input type=\"checkbox\" switch> to document.head, clicking it and removing it, once per call. C1.9 traced a long press that never fired on the worktree list to that stray click, and the file explorer calls triggerSelection on every row tap. The page has no haptics instead; the bundle test reads the shipped bytes for the shim."
+    },
+    {
+      "file": "app/h/[hostId]/files/[worktreeId].web.tsx",
+      "reason": "The shell renders this page for the file explorer, so the page has no shell to mount inside itself and no flag to read; the switch already happened natively. Its native file reaches OrcaMobileWebShellView, whose requireNativeViewManager call runs at import and throws in a browser — reproduced in the render check, which painted that console error instead of the route."
+    },
+    {
+      "file": "app/h/[hostId]/files/preview/[worktreeId].web.tsx",
+      "reason": "The shell renders this page for the file preview, for the same reason as the explorer beside it: no nested shell, and a native file that reaches requireNativeViewManager at import. Normalizing the route params stays here, because the page reads them back out of its own URL exactly as the native screen reads them out of the router."
+    },
     {
       "file": "app/h/[hostId]/agent-history/[worktreeId].web.tsx",
       "reason": "The shell renders this page for this route, so the page has no shell to mount inside itself and no flag to read; the switch already happened natively. Its native file reaches OrcaMobileWebShellView, whose requireNativeViewManager call runs at import and throws in a browser."