/** Keyless document-preview smoke through a real Session, Files tab, shipped renderers, and the default-application controls. */
import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'
import { tmpdir } from 'node:os'
import { nativeFileManager } from '@deepseek-ai/dsh-native-command'
import { delimiter, join, relative } from 'node:path'
import { fileURLToPath } from 'node:url'
import type { Browser, Locator, Page } from 'playwright'
import { chromium } from 'playwright'
import { afterAll, beforeAll, describe, expect, it, onTestFailed, vi } from 'vitest'
import { createLaunchEnvironmentSnapshot } from '@deepseek-ai/dsh-launch-environment'
import { realOfficeBytes } from './office-fixture.ts'
import { excelFixture, excelFreezeFixture, excelHtmlFixture, excelHtmlText, meetingMinutesFixture } from '../../../packages/client/ui-sidebar-documentpreview/tests/excel-fixture.ts'
import { excelDrawingFixture } from '../../../packages/client/ui-sidebar-documentpreview/tests/excel-drawing-fixture.ts'
import { xlsFixture } from '../../../packages/client/ui-sidebar-documentpreview/tests/xls-fixture.ts'
import { pdfFixture, selectionPdfFixture } from '../../../packages/client/ui-sidebar-documentpreview/tests/pdf-fixture.ts'
import { assertFixtureInventory, compareOrRefreshGolden, launchWebScaffold, watchConsole, webSnapshotMode, type WebScaffold } from './scaffold.ts'
import { openSettings, connectFreshWorkspace, connectFreshWorkspaceZh, newEnglishPage, saveFailureShot, scrollIntoView } from './support.ts'

const FIXTURE = fileURLToPath(new URL('../../../snapshots/web/lifecycle-chrome/session.v3.jsonl', import.meta.url))
const SNAPSHOT_DIR = fileURLToPath(new URL('../../../snapshots/web/document-preview', import.meta.url))
const EXPECTED = join(SNAPSHOT_DIR, 'document.expected.md')
const PAGING_PATCH = join(SNAPSHOT_DIR, 'paging.patch.yml')
const PAGE_LINES = 64
const SHOT_DIR = fileURLToPath(new URL('../../../.artifacts/screenshots/0908-document-preview', import.meta.url))
const PROMPT = 'Reply with the single word LIGHTHOUSE and stop.'
const MODE = webSnapshotMode()
/** The stubbed opener runs as a POSIX script; Windows and WSL keep their real file associations out of the lane. */
const STUB_OPENER = nativeFileManager() !== 'explorer'
const TINY_PNG = Buffer.from(
  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
  'base64',
)

/** Successful render evidence stays outside the committed snapshot inventory. */
async function successShot(page: Page, name: string): Promise<void> {
  await mkdir(SHOT_DIR, { recursive: true })
  await page.screenshot({ path: join(SHOT_DIR, `${name}-${MODE}-${process.pid}.png`), fullPage: true })
}

/** Check the visible loader group against the document body's center. */
async function expectDocumentLoading(preview: Locator): Promise<void> {
  const loading = preview.getByRole('status', { name: 'Rendering document...', exact: true })
  await expect.poll(() => loading.textContent()).toBe('Rendering document...')
  await expect.poll(() => loading.evaluate((node) => {
    const body = node.closest('[data-textpreview-body]')!.getBoundingClientRect()
    const spinner = node.querySelector('svg')!.getBoundingClientRect()
    const label = node.querySelector('span')!.getBoundingClientRect()
    return Math.max(Math.abs(spinner.width - 28), Math.abs(spinner.height - 28),
      Math.abs(spinner.x + spinner.width / 2 - body.x - body.width / 2),
      Math.abs((spinner.top + label.bottom) / 2 - body.y - body.height / 2))
  })).toBeLessThanOrEqual(1)
}

/** Paper edges expose the document backdrop even when fixed zoom overflows the viewport. */
async function expectPdfPageSpacing(preview: Locator): Promise<void> {
  await preview.getByRole('img', { name: 'PDF page 2', exact: true }).waitFor({ state: 'visible' })
  await expect.poll(() => preview.locator('[data-pdf-preview]').evaluate((node) => {
    const body = node.getBoundingClientRect()
    const pages = [...node.querySelectorAll('canvas')].map(page => page.getBoundingClientRect())
    const first = pages[0]!
    const last = pages.at(-1)!
    const inset = Math.min(first.top - body.top, body.bottom - last.bottom,
      ...pages.flatMap(page => [page.left - body.left, body.right - page.right]))
    return Math.max(Math.abs(pages[1]!.top - first.bottom - 12), 12 - inset)
  })).toBeLessThanOrEqual(1)
}

/** Exercise native browser selection and copy, including the text overlay's canvas alignment. */
async function copyPdfText(page: Page, preview: Locator, expected: string): Promise<void> {
  const text = preview.locator('[data-pdf-text] span:not(.markedContent)').filter({ hasText: expected }).first()
  await text.waitFor({ state: 'visible' })
  await expect.poll(() => text.evaluate(node => getComputedStyle(node).userSelect)).toBe('text')
  await expect.poll(() => text.evaluate(node => ({
    background: getComputedStyle(node, '::selection').backgroundColor,
    color: getComputedStyle(node, '::selection').color,
  }))).toEqual({ background: 'color(srgb 0.231373 0.509804 0.964706 / 0.4)', color: 'rgba(0, 0, 0, 0)' })
  await text.click({ clickCount: 3 })
  await expect.poll(() => page.evaluate(() => window.getSelection()?.toString().trim())).toBe(expected)
  await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], { origin: new URL(page.url()).origin })
  await page.keyboard.press('ControlOrMeta+C')
  await expect.poll(() => page.evaluate(async () => (await navigator.clipboard.readText()).trim())).toBe(expected)
  await expect.poll(() => preview.locator('[data-pdf-page]').first().evaluate((node) => {
    const canvas = node.querySelector('canvas')!.getBoundingClientRect()
    const layer = node.querySelector('.textLayer')!.getBoundingClientRect()
    return Math.max(Math.abs(layer.width - canvas.width), Math.abs(layer.height - canvas.height),
      Math.abs(layer.left - canvas.left), Math.abs(layer.top - canvas.top))
  })).toBeLessThan(1)
}

/** Trigger the document owner's native scroll handler after a real first page overflows. */
async function scrollForNextPage(body: Locator): Promise<void> {
  await body.evaluate((node) => {
    if (node.scrollHeight <= node.clientHeight) throw new Error('paging fixture does not overflow the document body')
    node.scrollTop = node.scrollHeight
  })
}

/** Read the solid vector fill away from antialiased page edges. */
async function canvasColor(canvas: Locator): Promise<string> {
  return await canvas.evaluate((node) => {
    const surface = node as HTMLCanvasElement
    const context = surface.getContext('2d')
    if (context === null) throw new Error('PDF canvas has no 2D context')
    const pixel = context.getImageData(Math.floor(surface.width / 2), Math.floor(surface.height / 2), 1, 1).data
    if (Number(pixel[3]) !== 255) return 'transparent'
    if (Number(pixel[0]) - Number(pixel[2]) > 150) return 'red'
    if (Number(pixel[2]) - Number(pixel[0]) > 150) return 'blue'
    return 'other'
  })
}

/** Wait for device resolution, subject to the page bitmap allocation limit. */
async function expectPdfResolution(canvas: Locator): Promise<void> {
  await expect.poll(() => canvas.evaluate((node) => {
    const bitmap = node as HTMLCanvasElement
    const width = Number.parseFloat(bitmap.style.getPropertyValue('--pdf-page-width'))
    const height = Number.parseFloat(bitmap.style.getPropertyValue('--pdf-page-height'))
    const expected = Math.min(bitmap.getBoundingClientRect().width * window.devicePixelRatio,
      Math.sqrt(16_777_216 * width / height))
    return Math.abs(bitmap.width - expected)
  })).toBeLessThanOrEqual(1)
}

/** Select a workspace file through the Files tab and wait for its preview identity. */
async function openPreviewFile(column: Locator, filesTab: Locator, preview: Locator, name: string): Promise<void> {
  await filesTab.click()
  await column.locator('[data-files-entry="file"]').getByRole('button', { name, exact: true }).click()
  await expect.poll(async () => (await preview.getAttribute('data-textpreview-url'))?.endsWith(`/${name}`)).toBe(true)
}

/** Move into the bottom reveal zone and wait for the shared zoom control. */
async function revealDocumentZoom(page: Page, preview: Locator): Promise<Locator> {
  const frame = preview.locator('[data-document-zoom-frame]')
  const bounds = await frame.boundingBox()
  if (bounds === null) throw new Error('document zoom frame has no bounds')
  await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height - 8)
  const controls = preview.locator('[data-document-zoom-controls]')
  await expect.poll(() => controls.getAttribute('data-document-zoom-visible')).toBe('true')
  return preview.getByRole('button', { name: 'Choose zoom', exact: true })
}

/** Leave the bottom reveal zone and wait for the delayed dismissal. */
async function hideDocumentZoom(page: Page, preview: Locator): Promise<void> {
  const frame = preview.locator('[data-document-zoom-frame]')
  const bounds = await frame.boundingBox()
  if (bounds === null) throw new Error('document zoom frame has no bounds')
  await page.mouse.move(bounds.x + 8, bounds.y + 8)
  await expect.poll(() => preview.locator('[data-document-zoom-controls]').getAttribute('data-document-zoom-visible')).toBeNull()
}

/** The canvas fills the space between the formula bar and sheet tabs without a statistics row. */
async function expectExcelLayout(excel: Locator): Promise<void> {
  await expect.poll(() => excel.locator('.fortune-stat-area').isVisible()).toBe(false)
  expect(await excel.locator('.luckysheet-sheets-item-function:visible').count()).toBe(0)
  await expect.poll(() => excel.evaluate((node) => {
    const pane = node.getBoundingClientRect()
    const canvas = node.querySelector('canvas')!.getBoundingClientRect()
    const formula = node.querySelector('.fortune-workarea')!.getBoundingClientRect()
    const tabs = node.querySelector('.luckysheet-sheet-area')!.getBoundingClientRect()
    const scroller = node.querySelector('.fortune-sheettab-container')!.getBoundingClientRect()
    const controls = [...node.querySelectorAll('.fortune-sheettab-scroll, .fortune-zoom-button')]
      .map(control => control.getBoundingClientRect())
    return Math.max(Math.abs(canvas.left - pane.left), Math.abs(canvas.width - pane.width),
      Math.abs(canvas.top - formula.bottom), Math.abs(canvas.bottom - tabs.top), Math.abs(tabs.bottom - pane.bottom),
      Math.abs(scroller.left - tabs.left), scroller.right - controls[0]!.left,
      ...controls.map((control, index) => control.right - (controls[index + 1]?.left ?? tabs.right)))
  })).toBeLessThanOrEqual(1)
  expect(await excel.locator('.fortune-sheettab-scroll, .fortune-zoom-button').evaluateAll(controls => controls.every((control) => {
    const rect = control.getBoundingClientRect()
    return control.contains(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2))
  }))).toBe(true)
}

it.skipIf(MODE === 'record').each(['en-US', 'zh-CN'])('fills the spreadsheet pane with read-only controls in %s', async (locale) => {
  const scaffold = await launchWebScaffold({ replayFixture: FIXTURE, paceMs: 5, compareReplaySession: false })
  let browser: Browser | undefined
  try {
    browser = await chromium.launch()
    const page = await browser.newPage({ viewport: { width: 1680, height: 1000 }, locale, timezoneId: 'Asia/Shanghai' })
    const consoleErrors = watchConsole(page)
    onTestFailed(async () => { await saveFailureShot(page, `screenshots/0908-document-preview/excel-resize-${locale}-${process.pid}`) })
    await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
    await (locale === 'zh-CN' ? connectFreshWorkspaceZh : connectFreshWorkspace)(page, scaffold.workspaceCwd)
    const settled = scaffold.whenTurnSettled()
    const input = page.locator('[data-composer-input]').first()
    await input.fill(PROMPT)
    await input.press('Enter')
    const sessionId = await settled
    const cwd = scaffold.ctx.agents.get(sessionId)?.session.header.cwd
    if (cwd === undefined) throw new Error('settled Session has no workspace cwd')
    const longCellText = 'Monthly export/import matrix and category comparison. 各商品类别分月出口/进口矩阵与结构对比图（公式汇总） '.repeat(3)
    await Promise.all([
      writeFile(join(cwd, 'budget.xlsx'), await excelFixture()),
      writeFile(join(cwd, 'meeting.xlsx'), await meetingMinutesFixture()),
      writeFile(join(cwd, 'legacy.xls'), xlsFixture()),
      writeFile(join(cwd, 'values.csv'), `${longCellText},2\n3,4\n`),
      writeFile(join(cwd, 'values.tsv'), '1\t2\n3\t4\n'),
    ])
    await page.getByText('LIGHTHOUSE', { exact: true }).waitFor()
    const column = page.locator('[data-rightbar-col]')
    await page.locator('[data-sidebar-right-expand]').click()
    await column.locator('[data-sidebar-right-guide-entry="files"]').click()
    await column.locator('[data-files-state="tree"]').waitFor({ state: 'visible' })
    await column.locator('[data-files-entry="file"]').getByRole('button', { name: 'budget.xlsx', exact: true }).click()
    const excel = column.locator('[data-excel-preview]')
    await excel.locator('.luckysheet-sheets-item-name').getByText('公式与格式', { exact: true }).click()
    await excel.locator('.fortune-sheet-overlay').click({ position: { x: 140, y: 30 } })
    const formula = excel.locator('.fortune-fx-input')
    await expect.poll(() => formula.innerText()).toBe('46281')
    await page.keyboard.press('Shift+ArrowLeft')
    const selection = excel.locator('.fortune-name-box')
    await expect.poll(() => selection.innerText()).toBe('A1:B1')
    await expectExcelLayout(excel)
    await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], { origin: new URL(page.url()).origin })
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toContain('42\t2026-09-16')
    const arrow = excel.locator('.luckysheet-sheets-item-function').first()
    await arrow.evaluate((node) => { (node as HTMLElement).focus() })
    expect(await arrow.evaluate(node => document.activeElement === node)).toBe(false)
    const canvas = excel.locator('canvas').first()
    const originalCanvas = await canvas.elementHandle()
    const original = await canvas.boundingBox()
    if (original === null || originalCanvas === null) throw new Error('spreadsheet canvas is unavailable')
    const panel = page.locator('[data-sidebar-right-panel]')
    const panelBounds = await panel.boundingBox()
    if (panelBounds === null) throw new Error('sidebar panel is unavailable')
    const viewport = page.viewportSize()
    const layout = await page.addStyleTag({ content: `[data-sidebar-right-panel] { width: ${panelBounds.width + 160}px !important; }` })
    await expect.poll(async () => Math.round((await canvas.boundingBox())!.width - original.width)).toBe(160)
    await expect.poll(() => formula.innerText()).toBe('46281')
    expect(await originalCanvas.evaluate(node => node.isConnected)).toBe(true)
    expect(page.viewportSize()).toEqual(viewport)
    await expectExcelLayout(excel)
    await successShot(page, `excel-resize-wide-${locale}`)
    await layout.evaluate((node) => { node.textContent = '[data-sidebar-right-panel] { width: 360px !important; }' })
    await expect.poll(async () => Math.round((await panel.boundingBox())!.width)).toBe(360)
    await expectExcelLayout(excel)
    expect(await excel.locator('.fortune-sheettab-container').evaluate((node) => {
      const selected = node.querySelector('.luckysheet-sheets-item-active')!.getBoundingClientRect()
      return selected.right - node.getBoundingClientRect().right
    })).toBeLessThanOrEqual(1)
    await page.setViewportSize({ width: 1680, height: 600 })
    await expect.poll(async () => Math.round(original.height - (await canvas.boundingBox())!.height)).toBe(400)
    await expectExcelLayout(excel)
    expect(await selection.innerText()).toBe('A1:B1')
    await successShot(page, `excel-resize-narrow-${locale}`)
    await page.setViewportSize(viewport!)
    await layout.evaluate((node) => { node.textContent = '' })
    await expect.poll(async () => Math.round((await canvas.boundingBox())!.width)).toBe(Math.round(original.width))
    expect(await formula.innerText()).toBe('46281')
    expect(await selection.innerText()).toBe('A1:B1')
    expect(await originalCanvas.evaluate(node => node.isConnected)).toBe(true)
    await expectExcelLayout(excel)
    await successShot(page, `excel-resize-restored-${locale}`)
    const zoom = excel.locator('.fortune-zoom-ratio-current')
    await excel.locator('.fortune-zoom-button').first().click()
    await expect.poll(() => zoom.innerText()).toBe('90%')
    await excel.locator('.fortune-zoom-button').last().click()
    await expect.poll(() => zoom.innerText()).toBe('100%')
    await zoom.click()
    await excel.locator('.fortune-zoom-ratio-item').getByText('150%', { exact: true }).click()
    await expect.poll(() => zoom.innerText()).toBe('150%')
    await zoom.click()
    await excel.locator('.fortune-zoom-ratio-item').getByText('100%', { exact: true }).click()
    const filesTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText(locale === 'zh-CN' ? '文件' : 'Files', { exact: true }) })
    const preview = column.locator('[data-textpreview-url]')
    await openPreviewFile(column, filesTab, preview, 'meeting.xlsx')
    const tabScroller = excel.locator('.fortune-sheettab-container-c')
    const activeSheet = excel.locator('.luckysheet-sheets-item-active .luckysheet-sheets-item-name')
    await expect.poll(() => activeSheet.innerText()).toBe('会议信息')
    const meetingCanvas = await canvas.elementHandle()
    if (meetingCanvas === null) throw new Error('meeting spreadsheet canvas is unavailable')
    await expectExcelLayout(excel)
    // Arrow keys pick the cell from committed state, so a later render cannot re-resolve it
    // against the reflowed grid the way it re-resolves a pointer press.
    const overlay = excel.locator('.fortune-sheet-overlay')
    await overlay.focus()
    await expect.poll(() => overlay.evaluate(node => document.activeElement === node)).toBe(true)
    await page.keyboard.press('ArrowRight')
    await expect.poll(() => selection.innerText()).toBe('B1')
    await expect.poll(() => formula.innerText()).toBe('')
    await page.keyboard.press('ArrowLeft')
    await expect.poll(() => selection.innerText()).toBe('A1')
    await expect.poll(() => formula.innerText()).toBe('会议纪要')
    for (const width of [1000, 360, 1000, 360]) {
      await layout.evaluate((node, width) => { node.textContent = `[data-sidebar-right-panel] { width: ${width}px !important; }` }, width)
      await expect.poll(async () => Math.round((await panel.boundingBox())!.width)).toBe(width)
      await expectExcelLayout(excel)
      expect(await meetingCanvas.evaluate(node => node.isConnected)).toBe(true)
      await expect.poll(() => selection.innerText()).toBe('A1')
      await expect.poll(() => excel.locator('.fortune-sheettab-scroll').count()).toBe(width === 360 ? 2 : 0)
    }
    const gridOffset = await excel.locator('.luckysheet-scrollbar-x').evaluate(node => node.scrollLeft)
    await tabScroller.hover()
    await page.mouse.wheel(180, 0)
    await expect.poll(() => tabScroller.evaluate(node => node.scrollLeft)).toBeGreaterThan(0)
    await page.mouse.wheel(-1000, 0)
    await expect.poll(() => tabScroller.evaluate(node => node.scrollLeft)).toBe(0)
    expect(await activeSheet.innerText()).toBe('会议信息')
    expect(await selection.innerText()).toBe('A1')
    expect(await zoom.innerText()).toBe('100%')
    expect(await excel.locator('.luckysheet-scrollbar-x').evaluate(node => node.scrollLeft)).toBe(gridOffset)
    for (const direction of ['right', 'left'] as const) {
      const arrow = excel.locator(`#fortune-sheettab-${direction}scroll`)
      for (let step = 0; step < 8; step += 1) {
        const { offset, maximum } = await tabScroller.evaluate(node => ({
          offset: node.scrollLeft, maximum: node.scrollWidth - node.clientWidth,
        }))
        const target = direction === 'right' ? Math.min(offset + 150, maximum) : Math.max(offset - 150, 0)
        if (Math.abs(target - offset) <= 1) break
        await arrow.click()
        await expect.poll(() => tabScroller.evaluate(node => node.scrollLeft)).toBeCloseTo(target, 0)
      }
      const sheetName = direction === 'right' ? '填写说明' : '会议信息'
      await excel.locator('.luckysheet-sheets-item-name').getByText(sheetName, { exact: true }).click()
      await expect.poll(() => activeSheet.innerText()).toBe(sheetName)
      await expectExcelLayout(excel)
      await successShot(page, `excel-navigation-${direction}-${locale}`)
    }
    expect(await tabScroller.evaluate(node => Math.abs(
      node.firstElementChild!.getBoundingClientRect().left - node.getBoundingClientRect().left,
    ))).toBeLessThanOrEqual(1)
    await excel.locator('.fortune-zoom-button').first().click()
    await expect.poll(() => zoom.innerText()).toBe('90%')
    await excel.locator('.fortune-zoom-button').last().click()
    await expect.poll(() => zoom.innerText()).toBe('100%')
    await zoom.click()
    await excel.locator('.fortune-zoom-ratio-item').getByText('150%', { exact: true }).click()
    await expect.poll(() => zoom.innerText()).toBe('150%')
    expect(await activeSheet.innerText()).toBe('会议信息')
    await expectExcelLayout(excel)
    await successShot(page, `excel-navigation-zoom-${locale}`)
    await layout.evaluate((node) => { node.textContent = '' })
    await meetingCanvas.dispose()
    for (const colorScheme of ['light', 'dark'] as const) {
      await page.emulateMedia({ colorScheme })
      await expect.poll(() => page.locator('body').getAttribute('data-ds-dark-theme')).toBe(colorScheme === 'dark' ? '' : null)
      for (const name of ['budget.xlsx', 'meeting.xlsx', 'legacy.xls', 'values.csv', 'values.tsv']) {
        await openPreviewFile(column, filesTab, preview, name)
        await excel.locator('.fortune-sheet-overlay').waitFor()
        await expectExcelLayout(excel)
        expect(await selection.evaluate(node => ({
          text: getComputedStyle(node).color, background: getComputedStyle(node).backgroundColor,
        }))).toEqual({ text: 'rgb(0, 0, 0)', background: 'rgb(255, 255, 255)' })
        if (name === 'values.csv') {
          await excel.locator('.fortune-sheet-overlay').click({ position: { x: 70, y: 30 } })
          await expect.poll(() => formula.textContent()).toBe(longCellText)
          await layout.evaluate((node) => { node.textContent = '[data-sidebar-right-panel] { width: 360px !important; }' })
          await expectExcelLayout(excel)
          await expect.poll(() => formula.evaluate((node) => {
            const range = document.createRange()
            range.selectNodeContents(node)
            return range.getClientRects().length
          })).toBe(1)
          expect(await formula.evaluate(node => node.scrollHeight <= node.clientHeight)).toBe(true)
          expect(await formula.evaluate(node => node.scrollWidth > node.clientWidth)).toBe(true)
          await formula.hover()
          await page.mouse.wheel(400, 0)
          await expect.poll(() => formula.evaluate(node => node.scrollLeft)).toBeGreaterThan(0)
          await successShot(page, `excel-formula-single-line-${locale}-${colorScheme}`)
          await layout.evaluate((node) => { node.textContent = '' })
          await expectExcelLayout(excel)
        }
        await successShot(page, `excel-controls-${name}-${locale}-${colorScheme}`)
      }
    }
    expect(consoleErrors.pageErrors).toEqual([])
    await originalCanvas.dispose()
  } finally {
    try { await browser?.close() } finally { await scaffold.close() }
  }
})

/** Pan with native pixel wheel input in every direction and along the sheet edges. */
async function expectExcelPanning(page: Page, excel: Locator): Promise<void> {
  // Chromium's CDP wheel distances scale with the emulated device pixel ratio.
  const scale = await page.evaluate(() => window.devicePixelRatio)
  const wheel = async (x: number, y: number) => { await page.mouse.wheel(x * scale, y * scale) }
  const offset = async () => await excel.evaluate(node => ({
    x: node.querySelector('.luckysheet-scrollbar-x')!.scrollLeft,
    y: node.querySelector('.luckysheet-scrollbar-y')!.scrollTop,
  }))
  const selection = await excel.locator('.fortune-name-box').innerText()
  await excel.evaluate((node) => {
    node.querySelector('.luckysheet-scrollbar-x')!.scrollLeft = 240
    node.querySelector('.luckysheet-scrollbar-y')!.scrollTop = 240
  })
  await expect.poll(offset).toEqual({ x: 240, y: 240 })
  await excel.locator('.fortune-sheet-overlay').hover({ position: { x: 260, y: 160 } })
  for (const [dx, dy] of [[37, 19], [-13, 27], [-19, -11], [23, -17], [11, 0], [0, 13], [-9, 0], [0, -7]] as const) {
    const before = await offset()
    await wheel(dx, dy)
    await expect.poll(offset).toEqual({ x: before.x + dx, y: before.y + dy })
  }
  expect(await excel.locator('.fortune-name-box').innerText()).toBe(selection)
  await wheel(-10000, -10000)
  await expect.poll(offset).toEqual({ x: 0, y: 0 })
  await wheel(-20, 20)
  await expect.poll(offset).toEqual({ x: 0, y: 20 })
  await wheel(20, -20)
  await expect.poll(offset).toEqual({ x: 20, y: 0 })
  await wheel(-20, 0)
  await expect.poll(offset).toEqual({ x: 0, y: 0 })
}

/** Sample the pixel band before the divider center, excluding the adjacent cell grid line. */
async function freezeDividerInk(excel: Locator, axis: 'x' | 'y'): Promise<number> {
  return await excel.evaluate((node, direction) => {
    const canvas = node.querySelector('canvas')!
    const bounds = canvas.getBoundingClientRect()
    const scale = canvas.width / bounds.width
    const columnHeader = node.querySelector<HTMLElement>('.fortune-col-header')!
    const rowHeader = node.querySelector<HTMLElement>('.fortune-row-header')!
    const columnHandle = node.querySelector<HTMLElement>('.fortune-cols-freeze-handle')!
    const rowHandle = node.querySelector<HTMLElement>('.fortune-rows-freeze-handle')!
    // Canvas coordinates include the 1.5px omitted from FortuneSheet's header elements.
    const x = Number.parseFloat(rowHeader.style.width) + 1.5 + Number.parseFloat(columnHandle.style.left) - columnHeader.scrollLeft
    const y = Number.parseFloat(columnHeader.style.height) + 1.5 + Number.parseFloat(rowHandle.style.top) - rowHeader.scrollTop - 2
    const context = canvas.getContext('2d')!
    let ink = 0
    for (let offset = -Math.round(scale); offset < 0; offset += 1) {
      const px = direction === 'x' ? Math.floor(x * scale) + offset : Math.floor((bounds.width - 25) * scale)
      const py = direction === 'y' ? Math.floor(y * scale) + offset : Math.floor((y + 15) * scale)
      const pixel = context.getImageData(px, py, 1, 1).data
      ink += 255 - pixel[0]!
    }
    return ink / scale
  }, axis)
}

it.skipIf(MODE === 'record').each([1, 2])('keeps frozen headings without dividers at DPR %i', async (deviceScaleFactor) => {
  const scaffold = await launchWebScaffold({ replayFixture: FIXTURE, paceMs: 5, compareReplaySession: false })
  let browser: Browser | undefined
  try {
    browser = await chromium.launch()
    const page = await browser.newPage({ viewport: { width: 1680, height: 1000 }, deviceScaleFactor, locale: 'en-US' })
    const consoleErrors = watchConsole(page)
    onTestFailed(async () => { await saveFailureShot(page, `screenshots/0908-document-preview/excel-freeze-${deviceScaleFactor}-${process.pid}`) })
    await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
    await connectFreshWorkspace(page, scaffold.workspaceCwd)
    const settled = scaffold.whenTurnSettled()
    await page.locator('[data-composer-input]').first().fill(PROMPT)
    await page.locator('[data-composer-input]').first().press('Enter')
    const cwd = scaffold.ctx.agents.get(await settled)?.session.header.cwd
    if (cwd === undefined) throw new Error('settled Session has no workspace cwd')
    await writeFile(join(cwd, 'freeze.xlsx'), await excelFreezeFixture())
    await page.getByText('LIGHTHOUSE', { exact: true }).waitFor()
    const column = page.locator('[data-rightbar-col]')
    await page.locator('[data-sidebar-right-expand]').click()
    await column.locator('[data-sidebar-right-guide-entry="files"]').click()
    await column.locator('[data-files-entry="file"]').getByRole('button', { name: 'freeze.xlsx', exact: true }).click()
    const excel = column.locator('[data-excel-preview]')
    const selectTopLeft = async () => {
      await excel.locator('.fortune-sheet-overlay').click({ position: { x: 80, y: 35 } })
      return await excel.locator('.fortune-fx-input').innerText()
    }
    for (const sheet of ['Both', 'Rows', 'Columns', 'None']) {
      await excel.locator('.luckysheet-sheets-item-name').getByText(sheet, { exact: true }).click()
      await expect.poll(selectTopLeft).toBe('R1C1')
      for (const handle of ['.fortune-cols-freeze-handle', '.fortune-rows-freeze-handle']) {
        expect(await excel.locator(handle).isVisible()).toBe(false)
        expect(await excel.locator(handle).evaluate(node => node.getClientRects().length)).toBe(0)
      }
      for (const ratio of ['100%', '150%']) {
        await excel.locator('.fortune-zoom-ratio-current').click()
        await excel.locator('.fortune-zoom-ratio-item').getByText(ratio, { exact: true }).click()
        await expect.poll(() => excel.locator('.fortune-zoom-ratio-current').innerText()).toBe(ratio)
        await excel.locator('.fortune-fx-input').click()
        for (const axis of ['x', 'y'] as const) {
          if (sheet === 'Both' || sheet === (axis === 'x' ? 'Columns' : 'Rows')) {
            await expect.poll(() => freezeDividerInk(excel, axis)).toBe(0)
          }
        }
        await expectExcelPanning(page, excel)
        await successShot(page, `excel-freeze-${sheet}-${ratio}-${deviceScaleFactor}`)
      }
      await excel.locator('.luckysheet-scrollbar-x').evaluate((node) => { node.scrollLeft = 240 })
      await excel.locator('.luckysheet-scrollbar-y').evaluate((node) => { node.scrollTop = 240 })
      await expect.poll(async () => {
        const value = await selectTopLeft()
        const match = /^R(\d+)C(\d+)$/.exec(value)
        return match && { rowFixed: match[1] === '1', columnFixed: match[2] === '1' }
      }).toEqual({ rowFixed: sheet === 'Both' || sheet === 'Rows', columnFixed: sheet === 'Both' || sheet === 'Columns' })
      await successShot(page, `excel-freeze-scrolled-${sheet}-${deviceScaleFactor}`)
    }
    await excel.locator('.luckysheet-sheets-item-name').getByText('Both', { exact: true }).click()
    await expect.poll(selectTopLeft).toBe('R1C1')
    const canvas = await excel.locator('canvas').first().elementHandle()
    const selection = await excel.locator('.fortune-name-box').innerText()
    const layout = await page.addStyleTag({ content: '[data-sidebar-right-panel] { width: 360px !important; }' })
    for (const colorScheme of ['light', 'dark'] as const) {
      await page.emulateMedia({ colorScheme })
      await expect.poll(() => page.locator('body').getAttribute('data-ds-dark-theme')).toBe(colorScheme === 'dark' ? '' : null)
      await expectExcelLayout(excel)
      await successShot(page, `excel-freeze-narrow-${colorScheme}-${deviceScaleFactor}`)
    }
    await layout.evaluate(node => node.parentNode!.removeChild(node))
    await expectExcelLayout(excel)
    expect(await canvas!.evaluate(node => node.isConnected)).toBe(true)
    expect(await excel.locator('.fortune-name-box').innerText()).toBe(selection)
    await canvas!.dispose()
    expect(consoleErrors.pageErrors).toEqual([])
  } finally {
    try { await browser?.close() } finally { await scaffold.close() }
  }
})

describe.skipIf(MODE === 'record')('web e2e: document preview through Files', () => {
  let scaffold: WebScaffold
  let browser: Browser
  let page: Page
  let tripwire: ReturnType<typeof watchConsole>
  let outsideRoot: string | undefined
  let nativeRoot: string | undefined
  let openLog = ''
  let launchLog = ''
  let appsCatalog = ''
  let linuxMimeDefault = ''
  let launchTarget = ''
  const opened = async (): Promise<Array<{ path: string; action: 'open' | 'reveal' | 'application' }>> =>
    (await readFile(openLog, 'utf8')).split('\n').filter(Boolean).map(line => JSON.parse(line) as { path: string; action: 'open' | 'reveal' | 'application' })
  /** The application each `open -a` gesture named; the opened log keeps only the file path. */
  const launched = async (): Promise<Array<{ app: string; path: string }>> =>
    (await readFile(launchLog, 'utf8')).split('\n').filter(Boolean).map(line => JSON.parse(line) as { app: string; path: string })

  beforeAll(async () => {
    outsideRoot = await mkdtemp(join(tmpdir(), 'dsh-preview-outside-'))
    if (STUB_OPENER) {
      // Exercise the built Host through its actual OS command, replacing only the desktop application.
      nativeRoot = await mkdtemp(join(tmpdir(), 'dsh-preview-native-'))
      openLog = join(nativeRoot, 'opened.jsonl')
      launchLog = join(nativeRoot, 'launched.jsonl')
      appsCatalog = join(nativeRoot, 'applications.json')
      await writeFile(openLog, '')
      await writeFile(launchLog, '')
      const command = process.platform === 'darwin' ? 'open' : 'xdg-open'
      await writeFile(join(nativeRoot, command), `#!/usr/bin/env node
const fs = require('node:fs');
const path = process.argv[2] === '-a' ? process.argv[4] : process.argv[2] === '-R' ? process.argv[3] : process.argv[2];
const action = process.argv[2] === '-a' ? 'application' : process.argv[2] === '-R' || fs.statSync(path).isDirectory() ? 'reveal' : 'open';
fs.appendFileSync(${JSON.stringify(openLog)}, JSON.stringify({ path, action }) + '\\n');
if (process.argv[2] === '-a') fs.appendFileSync(${JSON.stringify(launchLog)}, JSON.stringify({ app: process.argv[3], path: process.argv[4] }) + '\\n');
`, { mode: 0o700 })
      if (process.platform === 'darwin') {
        await writeFile(appsCatalog, JSON.stringify([
          { id: '/Applications/Test Player.app', name: 'Test Player', default: true, icon: `data:image/png;base64,${TINY_PNG.toString('base64')}` },
          { id: '/Applications/Other Player.app', name: 'Other Player', default: false, icon: null },
        ]))
        await writeFile(join(nativeRoot, 'osascript'), `#!/usr/bin/env node\nprocess.stdout.write(require('node:fs').readFileSync(${JSON.stringify(appsCatalog)}, 'utf8'));\n`, { mode: 0o700 })
        launchTarget = '/Applications/Test Player.app'
      }
      if (process.platform === 'linux') {
        const data = join(nativeRoot, 'data')
        await mkdir(join(data, 'applications'), { recursive: true })
        const icon = join(nativeRoot, 'icon.png')
        await writeFile(icon, TINY_PNG)
        const testDesktop = join(data, 'applications', 'test.desktop')
        await writeFile(testDesktop, `[Desktop Entry]\nName=Test Player\nIcon=${icon}\n`)
        await writeFile(join(data, 'applications', 'other.desktop'), '[Desktop Entry]\nName=Other Player\n')
        // `gio mime` owns the OS default here, so the marker file is what flips a run to "no default".
        linuxMimeDefault = join(nativeRoot, 'mime-default')
        await writeFile(linuxMimeDefault, 'test.desktop\n')
        await writeFile(join(nativeRoot, 'gio'), `#!/usr/bin/env node
const fs = require('node:fs');
const preferred = fs.readFileSync(${JSON.stringify(linuxMimeDefault)}, 'utf8').trim();
if (process.argv[2] === 'info') process.stdout.write('standard::content-type: video/mp4');
else if (process.argv[2] === 'mime') process.stdout.write((preferred.length > 0 ? 'Default application for video/mp4: ' + preferred + '\\n' : '') + 'Registered applications:\\n  test.desktop\\n  other.desktop\\n');
else if (process.argv[2] === 'launch') {
  fs.appendFileSync(${JSON.stringify(openLog)}, JSON.stringify({ path: process.argv[4], action: 'application' }) + '\\n');
  fs.appendFileSync(${JSON.stringify(launchLog)}, JSON.stringify({ app: process.argv[3], path: process.argv[4] }) + '\\n');
}
else process.exit(1);
`, { mode: 0o700 })
        launchTarget = testDesktop
        vi.stubEnv('XDG_DATA_HOME', data)
        vi.stubEnv('XDG_DATA_DIRS', '')
      }
      vi.stubEnv('PATH', `${nativeRoot}${delimiter}${process.env.PATH ?? ''}`)
    }
    // The Open In rows carry the default-application controls; the SSH marker
    // keeps the host's application catalog empty, so the Session-header split
    // button stays off every platform while the pinned desktop serves the file controls.
    scaffold = await launchWebScaffold({
      developerTools: false, replayFixture: FIXTURE, paceMs: 5, compareReplaySession: false, extraOverlayPath: [PAGING_PATCH, fileURLToPath(new URL('./fixtures/native-open-on.patch.yml', import.meta.url))],
      openInAppEnvironment: createLaunchEnvironmentSnapshot([{ source: 'process', values: { SSH_CONNECTION: '10.0.0.2 55000 10.0.0.9 22' } }]),
    })
    browser = await chromium.launch()
    page = await newEnglishPage(browser)
    tripwire = watchConsole(page)
    await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
    await connectFreshWorkspace(page, scaffold.workspaceCwd)
  })

  afterAll(async () => {
    try {
      await browser?.close()
    } finally {
      try {
        await scaffold?.close()
      } finally {
        vi.unstubAllEnvs()
        if (outsideRoot !== undefined) await rm(outsideRoot, { recursive: true, force: true })
        if (nativeRoot !== undefined) await rm(nativeRoot, { recursive: true, force: true })
      }
    }
  })

  it('opens text, isolated HTML, width-fitted images, and rendered PDF from the Session workspace', async () => {
    onTestFailed(async () => {
      await mkdir(SHOT_DIR, { recursive: true })
      await saveFailureShot(page, `screenshots/0908-document-preview/smoke-${process.pid}`)
    })
    await page.locator('[data-slot="conversation.hero.agentPreset"]').getByRole('button', { name: 'Standard mode', exact: true }).click()
    await expect.poll(() => page.getByRole('menuitem').count()).toBe(2)
    expect(await page.getByRole('menuitem', { name: /^PTC mode|^Minimal mode/ }).count()).toBe(0)
    await page.keyboard.press('Escape')
    expect(scaffold.ctx.settings.describe().find(row => row.ns === 'ui-settings')?.value).toEqual({ enabled: false })
    const settled = scaffold.whenTurnSettled()
    const input = page.locator('[data-composer-input]').first()
    await input.fill(PROMPT)
    await input.press('Enter')
    const sessionId = await settled
    await page.getByText('LIGHTHOUSE', { exact: true }).waitFor({ timeout: 15_000 })
    expect(await page.getByRole('tablist').count()).toBe(0)
    const cwd = scaffold.ctx.agents.get(sessionId)?.session.header.cwd
    if (cwd === undefined) throw new Error('settled Session has no workspace cwd')
    if (outsideRoot === undefined) throw new Error('outside fixture directory is unavailable')
    const outsideScript = join(outsideRoot, 'outside.js')
    const outsideReference = relative(cwd, outsideScript).replace(/\\/g, '/')
    let previewNetworkRequests = 0
    await page.route('https://preview.invalid/developer-tools.png', async (route) => {
      previewNetworkRequests += 1
      await route.fulfill({ status: 200, contentType: 'image/png', body: TINY_PNG })
    })
    const blockedRequests: string[] = []
    await page.route('https://blocked-preview.invalid/**', async (route) => {
      blockedRequests.push(route.request().url())
      await route.fulfill({ status: 200, contentType: 'text/html', body: 'ESCAPED' })
    })
    const markdownText = [
      '# Markdown smoke', '', 'Rendered from the workspace.', '',
      ...Array.from({ length: (PAGE_LINES - 4) / 2 }, (_, index) => [`Paragraph ${index + 1}: ${'visible prefix '.repeat(20)}`, '']).flat(),
      '# Markdown tail',
      '', '![relative image](preview-images/local%20image.png)',
      '', `![absolute image](<${join(cwd, 'tiny.png').replaceAll('\\', '/')}>)`,
      '', '![reference image][local-image]', '', '[local-image]: preview-images/local%20image.png',
    ].join('\n')
    await mkdir(join(cwd, 'preview-images'))
    const codeLines = [
      ...Array.from({ length: PAGE_LINES }, (_, index) => index === 0 ? 'const prefix = "CODE_PREFIX";' : `// prefix line ${index + 1}`),
      'const tail = "CODE_TAIL";',
    ]
    await Promise.all([
      writeFile(join(cwd, 'hostile.html'), `<!doctype html><html lang="en" class="dark"><head>
        <link rel="preconnect" href="https://blocked-preview.invalid">
        <noscript><meta http-equiv="refresh" content="0;url=https://blocked-preview.invalid/refresh"></noscript>
        </head><body style="margin:0"><h1>Static adversarial preview</h1>
        <a id="plain-link" href="https://blocked-preview.invalid/plain">Plain link</a>
        <div><template shadowrootmode="open"><a id="shadow-link" href="https://blocked-preview.invalid/shadow">Shadow link</a><template><iframe src="https://blocked-preview.invalid/frame"></iframe></template></template></div>
        <svg><a id="svg-link" href="https://blocked-preview.invalid/svg"><text y="20">SVG link</text><set attributeName="href" to="https://blocked-preview.invalid/set"/><animate attributeName="href" values="https://blocked-preview.invalid/animate"/></a></svg>
        <img src="https://blocked-preview.invalid/image"><iframe src="https://blocked-preview.invalid/direct-frame"></iframe>
        <math id="math-link" href="https://blocked-preview.invalid/math"><mi>x</mi></math>
        <form><math><mtext></form><form><mglyph><style></math><a id="mutation-link" href="https://blocked-preview.invalid/mutation">Mutation link</a>
        </body></html>`),
      writeFile(join(cwd, 'smoke.md'), markdownText),
      writeFile(join(cwd, 'pages.ts'), codeLines.join('\n')),
      writeFile(join(cwd, 'notes.unknown'), 'UNKNOWN_SUFFIX\nPlain fallback.'),
      writeFile(join(cwd, 'smoke.html'), [
        '<!doctype html><link rel="stylesheet" href="./local.css">',
        '<h1>HTML smoke</h1><p id="result">pending</p><p id="local-result">pending</p><p id="parent-result">pending</p>',
        '<img src="https://preview.invalid/developer-tools.png" width="1" height="1" alt="">',
        '<p id="outside-result">pending</p>',
        '<script>document.getElementById("result").textContent="INLINE_OK";',
        'try{parent.document.documentElement.setAttribute("data-document-preview-escape","true");document.getElementById("parent-result").textContent="parent-accessible"}',
        'catch(error){const result=document.getElementById("parent-result");result.textContent="parent-blocked";result.dataset.error=error.name}</script>',
        '<script src="./local.js"></script>',
        `<script src="${outsideReference}"></script>`,
      ].join('\n')),
      writeFile(join(cwd, 'local.js'), 'document.getElementById("local-result").textContent="LOCAL_JS_OK";'),
      writeFile(join(cwd, 'local.css'), '#local-result { color: rgb(12, 34, 56); }'),
      writeFile(outsideScript, 'document.getElementById("outside-result").textContent="OUTSIDE_JS_OK";'),
      writeFile(join(cwd, 'tiny.png'), TINY_PNG),
      writeFile(join(cwd, 'preview-images', 'local image.png'), TINY_PNG),
      writeFile(join(cwd, 'large.svg'), [
        '<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1600" viewBox="0 0 1200 1600">',
        '<script>parent.document.documentElement.setAttribute("data-image-preview-escape","true")</script>',
        '<rect width="1200" height="1600" fill="#2463eb"/>',
        '</svg>',
      ].join('')),
      writeFile(join(cwd, 'smoke.pdf'), pdfFixture()),
      writeFile(join(cwd, 'user-unit.pdf'), pdfFixture(2)),
      ...[90, 180, 270].map(rotation => writeFile(join(cwd, `rotated-${rotation}.pdf`), pdfFixture(4, rotation))),
      writeFile(join(cwd, 'selection.pdf'), selectionPdfFixture()),
      writeFile(join(cwd, 'budget.xlsx'), await excelFixture()),
      writeFile(join(cwd, 'chart-budget.xlsx'), await excelDrawingFixture()),
      writeFile(join(cwd, 'meeting.xlsx'), await meetingMinutesFixture()),
      writeFile(join(cwd, 'literal-html.xlsx'), await excelHtmlFixture()),
      writeFile(join(cwd, 'budget.xls'), xlsFixture()),
      writeFile(join(cwd, 'table.csv'), '00123,"中文,字段","=SUM(1,2)"\n2024-03-01,,TRUE'),
      writeFile(join(cwd, 'table.tsv'), '00123\t"中文\t字段"\t=SUM(1,2)\n2024-03-01\t\tTRUE'),
      ...['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].map(extension => writeFile(join(cwd, `unavailable.${extension}`), Buffer.from('PK\u0003\u0004OFFICE_BINARY_PREVIEW'))),
      writeFile(join(cwd, 'clip.mp4'), Buffer.from([0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70])),
    ])

    const column = page.locator('[data-rightbar-col]')
    await page.locator('[data-sidebar-right-expand]').click()
    await column.locator('[data-sidebar-right-guide-entry="files"]').click()
    await column.locator('[data-files-state="tree"]').waitFor({ state: 'visible' })
    await column.locator('[data-files-reload]').click()
    const filesTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('Files', { exact: true }) })
    const addTab = column.locator('[data-dockkit-add-tab]')
    expect(await column.locator('[data-dockkit-tab]').count()).toBe(1)
    const defaultTitle = await filesTab.locator('[data-dockkit-tab-title]').innerText()
    const initialFilesClose = await filesTab.locator('[data-dockkit-tab-close]').count()
    expect(initialFilesClose).toBe(1)
    await filesTab.click({ button: 'right' })
    await page.locator('[data-context-menu][role="menu"]').waitFor()
    await page.keyboard.press('Escape')
    await addTab.waitFor({ state: 'visible' })
    const initialAdd = await addTab.count()
    expect(initialAdd).toBe(1)
    await addTab.click()
    await column.locator('[data-sidebar-right-guide]').waitFor({ state: 'visible' })
    await expect.poll(() => column.locator('[data-dockkit-tab]').count()).toBe(2)
    const guideTab = column.locator('[data-dockkit-tab]').filter({ hasNot: page.getByText('Files', { exact: true }) })
    const guideClose = await guideTab.locator('[data-dockkit-tab-close]').count()
    const filesCloseWithGuide = await filesTab.locator('[data-dockkit-tab-close]').count()
    expect(guideClose).toBe(1)
    expect(filesCloseWithGuide).toBe(1)
    await expect.poll(() => addTab.count()).toBe(0)
    const addWithGuide = await addTab.count()
    await guideTab.hover()
    await guideTab.locator('[data-dockkit-tab-close]').click()
    await column.locator('[data-files-state="tree"]').waitFor({ state: 'visible' })
    await expect.poll(() => column.locator('[data-sidebar-right-guide]').count()).toBe(0)
    await expect.poll(() => column.locator('[data-dockkit-tab]').count()).toBe(1)
    await addTab.waitFor({ state: 'visible' })
    const restoredFilesClose = await filesTab.locator('[data-dockkit-tab-close]').count()
    const restoredAdd = await addTab.count()
    expect(restoredFilesClose).toBe(1)
    expect(restoredAdd).toBe(1)
    const preview = column.locator('[data-textpreview-url]')
    const openFile = openPreviewFile.bind(undefined, column, filesTab, preview)
    const viewer = preview.locator('[data-document-viewer-menu]')
    const body = preview.locator('[data-textpreview-body]')
    const sections = ['# Document preview']
    sections.push([
      '## Sidebar tabs', '',
      `- Default tab: ${defaultTitle}`,
      `- Files close buttons (alone -> with guide -> restored): ${[initialFilesClose, filesCloseWithGuide, restoredFilesClose].join(' -> ')}`,
      `- Manual guide close buttons: ${guideClose}`,
      `- Add buttons (Files -> guide -> Files): ${[initialAdd, addWithGuide, restoredAdd].join(' -> ')}`,
    ].join('\n'))

    await openFile('smoke.md')
    await expect.poll(() => viewer.innerText()).toBe('Markdown')
    await preview.getByRole('heading', { name: 'Markdown smoke', exact: true }).waitFor({ timeout: 15_000 })
    await preview.getByText('Rendered from the workspace.', { exact: true }).waitFor({ state: 'visible' })
    const heading = await preview.getByRole('heading', { name: 'Markdown smoke', exact: true }).innerText()
    const markdownTail = preview.getByRole('heading', { name: 'Markdown tail', exact: true })
    await expect.poll(() => preview.locator('[data-textpreview-more]').isEnabled()).toBe(true)
    expect(await markdownTail.count()).toBe(0)
    await scrollForNextPage(body)
    await markdownTail.waitFor({ timeout: 15_000 })
    await expect.poll(() => preview.locator('[data-textpreview-more]').count()).toBe(0)
    expect(await preview.getByRole('heading', { name: heading, exact: true }).count()).toBe(1)
    expect(await preview.getByText('Rendered from the workspace.', { exact: true }).count()).toBe(1)
    const tailHeading = await markdownTail.innerText()
    const markdownImages: string[] = []
    for (const alt of ['relative image', 'absolute image', 'reference image']) {
      const image = preview.getByRole('img', { name: alt, exact: true })
      await scrollIntoView(image)
      await expect.poll(() => image.evaluate((node: HTMLImageElement) => node.complete && node.naturalWidth > 0)).toBe(true)
      const source = new URL(await image.getAttribute('src') ?? '')
      expect(source.pathname).toBe('/api/file')
      markdownImages.push(alt)
    }
    await scrollIntoView(preview.getByRole('heading', { name: heading, exact: true }))
    await successShot(page, 'markdown')
    const markdownTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('smoke.md', { exact: true }) })
    const markdownTabId = await markdownTab.getAttribute('data-dockkit-tab')
    expect(markdownTabId).not.toBeNull()
    const tabCount = await column.locator('[data-dockkit-tab]').count()
    const markdownViewers = [await viewer.innerText()]
    const sourceFonts: Array<{ fontSize: string; lineHeight: string }> = []
    for (const label of ['Code', 'Plain text']) {
      await viewer.click()
      await page.getByRole('menuitem', { name: label, exact: true }).click()
      await expect.poll(() => viewer.innerText()).toBe(label)
      if (label === 'Code') {
        await preview.locator('.shiki').waitFor({ timeout: 15_000 })
        expect(await preview.locator('.shiki').textContent()).toBe(markdownText)
      } else {
        await expect.poll(async () => (await preview.locator('[data-textpreview-line]').first().textContent())?.trim()).toBe('# Markdown smoke')
      }
      const source = label === 'Code' ? preview.locator('.shiki') : preview.locator('[data-textpreview-line]').first()
      sourceFonts.push(await source.evaluate((node) => {
        const style = getComputedStyle(node)
        return { fontSize: style.fontSize, lineHeight: style.lineHeight }
      }))
      expect(await markdownTab.getAttribute('data-dockkit-tab')).toBe(markdownTabId)
      expect(await column.locator('[data-dockkit-tab]').count()).toBe(tabCount)
      markdownViewers.push(await viewer.innerText())
    }
    expect(sourceFonts[1]).toEqual(sourceFonts[0])
    sections.push([
      '## Markdown', '',
      `- Heading: ${heading}`,
      `- Tail loaded by scrolling: ${tailHeading}`,
      `- Loaded images: ${markdownImages.join(' | ')}`,
      `- Viewers: ${markdownViewers.join(' -> ')}`,
      `- Same tab: ${String(await markdownTab.getAttribute('data-dockkit-tab') === markdownTabId)}`,
    ].join('\n'))

    await openFile('hostile.html')
    const hostileFrame = page.frameLocator('[data-html-preview]')
    await hostileFrame.getByRole('heading', { name: 'Static adversarial preview' }).waitFor()
    expect(await hostileFrame.locator('html').getAttribute('class')).toBe('dark')
    expect(await hostileFrame.locator('body').evaluate(node => getComputedStyle(node).margin)).toBe('0px')
    for (const id of ['plain-link', 'svg-link', 'math-link']) {
      const link = hostileFrame.locator(`#${id}`)
      expect(await link.getAttribute('href')).toBeNull()
      await link.click()
    }
    // DOMPurify leaves ordinary templates inert and removes declarative shadow roots.
    expect(await hostileFrame.locator('#shadow-link').count()).toBe(0)
    expect(await hostileFrame.locator('[href], [xlink\\:href]').count()).toBe(0)
    const mutationLink = hostileFrame.locator('#mutation-link')
    if (await mutationLink.count() > 0) await mutationLink.click()
    expect(await hostileFrame.locator('noscript, link, set, animate, iframe').count()).toBe(0)
    expect(blockedRequests).toEqual([])
    await hostileFrame.getByRole('heading', { name: 'Static adversarial preview' }).waitFor()

    await openFile('smoke.html')
    await expect.poll(() => viewer.innerText()).toBe('HTML')
    const iframe = preview.locator('[data-html-preview]')
    await iframe.waitFor({ timeout: 15_000 })
    expect(await iframe.getAttribute('sandbox')).toBe('')
    const basicHtml = page.frameLocator('[data-html-preview]')
    await basicHtml.getByRole('heading', { name: 'HTML smoke', exact: true }).waitFor()
    expect(await basicHtml.locator('#result').innerText()).toBe('pending')
    expect(await basicHtml.locator('#local-result').innerText()).toBe('pending')
    expect(previewNetworkRequests).toBe(0)
    await successShot(page, 'html-basic')
    sections.push([
      '## Basic HTML', '',
      '- Developer tools: disabled for this scenario',
      '- Sandbox: no permissions',
      `- Inline script: ${await basicHtml.locator('#result').innerText()}`,
      `- Local script: ${await basicHtml.locator('#local-result').innerText()}`,
      `- Network requests: ${previewNetworkRequests}`,
    ].join('\n'))
    await openSettings(page, 'en')
    const settings = page.getByRole('dialog', { name: 'Settings' })
    await settings.getByRole('switch', { name: 'Show coding view' }).click()
    await expect.poll(() => settings.getByRole('switch', { name: 'Show coding view' }).getAttribute('aria-checked')).toBe('true')
    await successShot(page, 'developer-tools-setting')
    await settings.getByRole('button', { name: 'Close', exact: true }).click()
    await expect.poll(() => iframe.getAttribute('sandbox')).toBe('allow-scripts')
    expect(await iframe.getAttribute('sandbox')).toBe('allow-scripts')
    expect(await iframe.evaluate((node) => {
      const host = node.closest('[data-textpreview-body]')
      if (!(host instanceof HTMLElement)) throw new Error('HTML preview body is unavailable')
      const outer = host.getBoundingClientRect()
      const frame = node.getBoundingClientRect()
      return {
        top: Math.round(frame.top - outer.top),
        right: Math.round(outer.right - frame.right),
        bottom: Math.round(outer.bottom - frame.bottom),
        left: Math.round(frame.left - outer.left),
      }
    })).toEqual({ top: 0, right: 0, bottom: 0, left: 0 })
    const html = page.frameLocator('[data-html-preview]')
    await html.getByRole('heading', { name: 'HTML smoke', exact: true }).waitFor({ timeout: 15_000 })
    await expect.poll(() => html.locator('#result').innerText()).toBe('INLINE_OK')
    await expect.poll(() => html.locator('img[src="https://preview.invalid/developer-tools.png"]')
      .evaluate(node => (node as HTMLImageElement).naturalWidth)).toBe(1)
    await expect.poll(() => html.locator('#local-result').innerText()).toBe('LOCAL_JS_OK')
    await expect.poll(() => html.locator('#outside-result').innerText()).toBe('OUTSIDE_JS_OK')
    await expect.poll(() => html.locator('#local-result').evaluate(node => getComputedStyle(node).color)).toBe('rgb(12, 34, 56)')
    await expect.poll(() => html.locator('#parent-result').innerText()).toBe('parent-blocked')
    expect(await html.locator('#parent-result').getAttribute('data-error')).toBe('SecurityError')
    expect(await page.locator('html').getAttribute('data-document-preview-escape')).toBeNull()
    expect(previewNetworkRequests).toBe(1)
    const beforeStyleSave = await iframe.getAttribute('src')
    await writeFile(join(cwd, 'local.css'), '#local-result { color: rgb(56, 34, 12); }')
    await expect.poll(() => html.locator('#local-result').evaluate(node => getComputedStyle(node).color)).toBe('rgb(56, 34, 12)')
    expect(await iframe.getAttribute('src')).not.toBe(beforeStyleSave)
    const beforeScriptSave = await iframe.getAttribute('src')
    await writeFile(join(cwd, 'local.js'), 'document.getElementById("local-result").textContent="LOCAL_JS_REFRESHED";')
    await expect.poll(() => html.locator('#local-result').innerText()).toBe('LOCAL_JS_REFRESHED')
    expect(await iframe.getAttribute('src')).not.toBe(beforeScriptSave)
    await page.getByRole('tab', { name: /Trajectory/ }).click()
    await scaffold.ctx.settings.update('ui-settings', { enabled: false })
    await expect.poll(() => page.getByRole('tab', { name: /Trajectory/ }).count()).toBe(0)
    await expect.poll(() => iframe.getAttribute('sandbox')).toBe('')
    expect(await page.getByText('LIGHTHOUSE', { exact: true }).count()).toBeGreaterThan(0)
    await scaffold.ctx.settings.update('ui-settings', { enabled: true })
    await expect.poll(() => iframe.getAttribute('sandbox')).toBe('allow-scripts')
    await expect.poll(() => html.locator('#result').innerText()).toBe('INLINE_OK')
    await successShot(page, 'html')
    sections.push([
      '## HTML', '',
      `- Viewer: ${await viewer.innerText()}`,
      `- Sandbox: ${await iframe.getAttribute('sandbox')}`,
      `- Inline script: ${await html.locator('#result').innerText()}`,
      `- Local script after save: ${await html.locator('#local-result').innerText()}`,
      `- Outside-workspace script: ${await html.locator('#outside-result').innerText()}`,
      `- Local stylesheet after save: ${await html.locator('#local-result').evaluate(node => getComputedStyle(node).color)}`,
      `- Parent access: ${await html.locator('#parent-result').innerText()} (${await html.locator('#parent-result').getAttribute('data-error')})`,
      `- Parent unchanged: ${String(await page.locator('html').getAttribute('data-document-preview-escape') === null)}`,
    ].join('\n'))

    await openFile('smoke.pdf')
    const canvas = preview.getByRole('img', { name: 'PDF page 1', exact: true })
    await canvas.waitFor({ state: 'visible', timeout: 30_000 })
    expect(await viewer.count()).toBe(0)
    const zoomControls = preview.locator('[data-document-zoom-controls]')
    await expect.poll(() => zoomControls.getAttribute('data-document-zoom-visible')).toBeNull()
    let pdfZoom = await revealDocumentZoom(page, preview)
    await hideDocumentZoom(page, preview)
    pdfZoom = await revealDocumentZoom(page, preview)
    const pdfWidth = (await canvas.boundingBox())!.width
    const pdfIntrinsicWidth = await canvas.evaluate(node => Number.parseFloat(node.style.getPropertyValue('--pdf-page-width')))
    await expect.poll(() => pdfZoom.innerText()).toBe(`${String(Math.round(pdfWidth / pdfIntrinsicWidth * 100))}%`)
    await pdfZoom.click()
    await page.getByRole('menuitem', { name: '100%', exact: true }).click()
    await expect.poll(async () => (await canvas.boundingBox())!.width).toBeCloseTo(pdfIntrinsicWidth, 0)
    pdfZoom = await revealDocumentZoom(page, preview)
    await pdfZoom.click()
    await page.getByRole('menuitem', { name: '150%', exact: true }).click()
    await expect.poll(async () => (await canvas.boundingBox())!.width / pdfIntrinsicWidth).toBeCloseTo(1.5, 1)
    await expectPdfResolution(canvas)
    await expectPdfPageSpacing(preview)
    pdfZoom = await revealDocumentZoom(page, preview)
    await pdfZoom.click()
    await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
    await expect.poll(async () => (await canvas.boundingBox())!.width).toBeCloseTo(pdfWidth, 0)
    await expectPdfResolution(canvas)
    expect(await preview.locator('[data-pdf-page]').count()).toBe(2)
    await expect.poll(() => canvasColor(canvas), { timeout: 30_000 }).toBe('red')
    const firstColor = await canvasColor(canvas)
    expect(firstColor).toBe('red')
    const workerNames = await Promise.all(page.workers().map(worker => worker.evaluate(() => self.name)))
    expect(workerNames).toContain('dsh-pdf')
    await scrollIntoView(preview.locator('[data-pdf-page="2"]'))
    const secondPage = preview.getByRole('img', { name: 'PDF page 2', exact: true })
    await secondPage.waitFor({ state: 'visible', timeout: 30_000 })
    await expect.poll(() => canvasColor(secondPage), { timeout: 30_000 }).toBe('blue')
    const secondColor = await canvasColor(secondPage)
    expect(secondColor).toBe('blue')
    for (const colorScheme of ['dark', 'light'] as const) {
      await page.emulateMedia({ colorScheme })
      await expect.poll(() => page.locator('body').getAttribute('data-ds-dark-theme')).toBe(colorScheme === 'dark' ? '' : null)
      await expectPdfPageSpacing(preview)
      await copyPdfText(page, preview, 'Selectable PDF text')
      await successShot(page, `pdf-spacing-${colorScheme}`)
    }
    expect(await body.evaluate(node => node.scrollWidth <= node.clientWidth)).toBe(true)
    const pdfTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('smoke.pdf', { exact: true }) })
    const pdfTabId = await pdfTab.getAttribute('data-dockkit-tab')
    expect(pdfTabId).not.toBeNull()
    await filesTab.click()
    await column.locator('[data-files-state="tree"]').waitFor({ state: 'visible' })
    await pdfTab.click()
    await scrollIntoView(preview.locator('[data-pdf-page="2"]'))
    await secondPage.waitFor({ state: 'visible', timeout: 30_000 })
    await expect.poll(() => canvasColor(secondPage), { timeout: 30_000 }).toBe('blue')
    const restoredColor = await canvasColor(secondPage)
    expect(restoredColor).toBe('blue')
    expect(await pdfTab.getAttribute('data-dockkit-tab')).toBe(pdfTabId)
    await copyPdfText(page, preview, 'Selectable PDF text')
    await successShot(page, 'pdf')
    sections.push([
      '## PDF', '',
      `- Viewer menu hidden: ${String(await viewer.count() === 0)}`,
      `- Worker: ${workerNames.find(name => name === 'dsh-pdf')}`,
      `- Continuous pages: ${await preview.locator('[data-pdf-page]').count()}`,
      '- Zoom reveal: hidden -> bottom hover -> delayed hidden',
      '- Zoom modes: fit width -> 100% -> 150% -> fit width',
      '- Paper layout: 12px page gaps and outer backdrop insets in both themes',
      '- Settled zoom redraws the page at device resolution',
      `- Horizontal overflow: ${String(await body.evaluate(node => node.scrollWidth > node.clientWidth))}`,
      `- Canvas fills: ${[firstColor, secondColor, restoredColor].join(' -> ')}`,
      `- Same tab: ${String(await pdfTab.getAttribute('data-dockkit-tab') === pdfTabId)}`,
      '- Selected and copied text: Selectable PDF text',
    ].join('\n'))

    await openFile('user-unit.pdf')
    await preview.getByRole('img', { name: 'PDF page 1', exact: true }).waitFor({ state: 'visible' })
    await copyPdfText(page, preview, 'Selectable PDF text')
    sections.push('## PDF page units\n\n- UserUnit 2: selected and copied text aligns with the canvas')

    const viewportSize = page.viewportSize()!
    try {
      for (const rotation of [90, 180, 270]) {
        await openFile(`rotated-${rotation}.pdf`)
        for (const width of [viewportSize.width, 1280]) {
          await page.setViewportSize({ ...viewportSize, width })
          await copyPdfText(page, preview, 'Selectable PDF text')
          // The fixture's only black pixels are text; canvas ink is independent of the overlay geometry.
          await expect.poll(() => preview.locator('[data-pdf-page]').first().evaluate((node) => {
            const canvas = node.querySelector('canvas')!
            const canvasBox = canvas.getBoundingClientRect()
            const textBox = node.querySelector('.textLayer span')!.getBoundingClientRect()
            const pixels = canvas.getContext('2d')!.getImageData(0, 0, canvas.width, canvas.height).data
            let ink = 0
            let aligned = 0
            for (let i = 0; i < pixels.length; i += 4) {
              if (pixels[i + 3]! < 128 || Math.max(pixels[i]!, pixels[i + 1]!, pixels[i + 2]!) > 80) continue
              ink++
              const x = canvasBox.left + ((i / 4) % canvas.width + 0.5) * canvasBox.width / canvas.width
              const y = canvasBox.top + (Math.floor(i / 4 / canvas.width) + 0.5) * canvasBox.height / canvas.height
              if (x >= textBox.left - 1 && x <= textBox.right + 1 && y >= textBox.top - 1 && y <= textBox.bottom + 1) aligned++
            }
            return ink === 0 ? 0 : aligned / ink
          })).toBeGreaterThan(0.95)
        }
      }
    } finally { await page.setViewportSize(viewportSize) }
    sections.push('## PDF page rotation\n\n- 90, 180, 270 degrees: selection and copied text align with canvas ink before and after resizing')

    await openFile('selection.pdf')
    await preview.getByRole('img', { name: 'PDF page 1', exact: true }).waitFor({ state: 'visible' })
    const selectionLayer = preview.locator('.textLayer')
    const selectionText = selectionLayer.locator('span:not(.markedContent)')
    const titleText = selectionText.filter({ hasText: 'JOURNAL' })
    const priorityText = selectionText.filter({ hasText: 'HIGH / MEDIUM / LOW' }).first()
    // The text resize observer aligns the overlay after the canvas becomes visible.
    await titleText.waitFor({ state: 'visible' })
    await priorityText.waitFor({ state: 'visible' })
    const titleBox = await titleText.boundingBox()
    const priorityBox = await priorityText.boundingBox()
    if (titleBox === null || priorityBox === null) throw new Error('selection fixture text has no bounds')
    const start = { x: titleBox.x + 1, y: titleBox.y + titleBox.height / 2 }
    const end = { x: priorityBox.x + priorityBox.width / 2, y: priorityBox.y - 3 }
    const drag = async (from: typeof start, to: typeof end, through?: typeof end): Promise<string> => {
      await page.mouse.move(from.x, from.y)
      await page.mouse.down()
      try {
        if (through !== undefined) await page.mouse.move(through.x, through.y, { steps: 15 })
        await page.mouse.move(to.x, to.y, { steps: 15 })
        return await page.evaluate(() => window.getSelection()?.toString() ?? '')
      } finally { await page.mouse.up() }
    }
    const priority = { x: end.x, y: priorityBox.y + priorityBox.height / 2 }
    const forward = await drag(start, end, priority)
    expect(forward).toContain('JOURNAL')
    expect(forward).toContain('THREE TASKS')
    expect(forward).not.toContain('REFLECTION')
    expect(forward).not.toContain('AFTER TABLE')
    expect(await page.evaluate(() => window.getSelection()?.toString())).toBe(forward)
    const backward = await drag(priority, start)
    expect(backward).toContain('THREE TASKS')
    expect(backward).not.toContain('REFLECTION')
    expect(backward).not.toContain('AFTER TABLE')
    expect(await page.evaluate(() => window.getSelection()?.toString())).toBe(backward)
    expect(await selectionLayer.locator('br').first().evaluate(node => getComputedStyle(node, '::selection').backgroundColor))
      .toBe('rgba(0, 0, 0, 0)')
    await successShot(page, 'pdf-drag-selection')
    sections.push('## PDF drag selection\n\n- Table selection: forward and backward drags exclude later sections\n- Line-break highlight: transparent\n- Text selection: translucent blue in light and dark themes; canvas text remains visible\n- Mouse release preserves the selected text')

    const pngResponse = page.waitForResponse(response => new URL(response.url()).pathname === '/api/workspaceFiles/readBytes'
      && (response.request().postDataJSON() as { payload: { args: { path: string } } }).payload.args.path === 'tiny.png')
    await openFile('tiny.png')
    const transferred = await pngResponse
    expect(transferred.headers()['content-type']).toMatch(/^multipart\/form-data;/)
    const transferredBody = await new Response(new Uint8Array(await transferred.body()), { headers: transferred.headers() }).formData()
    const metadata = transferredBody.get('metadata')
    if (typeof metadata !== 'string') throw new Error('missing PNG metadata')
    const { attachments } = JSON.parse(metadata) as { attachments: { path: string[]; codec: string; part: string }[] }
    expect(attachments).toHaveLength(1)
    expect(attachments[0]).toMatchObject({ path: ['data'], codec: 'bytes' })
    expect(attachments[0]!.part).toEqual(expect.any(String))
    const transferredFile = transferredBody.get(attachments[0]!.part)
    if (transferredFile === null || typeof transferredFile === 'string') throw new Error('missing PNG payload')
    expect(Buffer.from(await transferredFile.arrayBuffer())).toEqual(TINY_PNG)
    const tinyImage = preview.getByRole('img', { name: 'Image preview: tiny.png', exact: true })
    await tinyImage.waitFor({ state: 'visible', timeout: 15_000 })
    expect(await viewer.count()).toBe(0)
    expect(await tinyImage.evaluate(node => ({
      width: (node as HTMLImageElement).naturalWidth,
      height: (node as HTMLImageElement).naturalHeight,
      draggable: (node as HTMLImageElement).draggable,
    }))).toEqual({ width: 1, height: 1, draggable: true })
    const centering = await tinyImage.evaluate((node) => {
      const image = node.getBoundingClientRect()
      const scroller = node.closest('[data-textpreview-body]')?.getBoundingClientRect()
      if (scroller === undefined) throw new Error('image document scroller is unavailable')
      return {
        horizontal: Math.abs((image.left + image.width / 2) - (scroller.left + scroller.width / 2)),
        vertical: Math.abs((image.top + image.height / 2) - (scroller.top + scroller.height / 2)),
      }
    })
    expect(centering.horizontal).toBeLessThan(10)
    expect(centering.vertical).toBeLessThan(10)
    let imageZoom = await revealDocumentZoom(page, preview)
    await expect.poll(() => imageZoom.innerText()).toBe('100%')
    const tinyWidth = (await tinyImage.boundingBox())!.width
    await imageZoom.click()
    await page.getByRole('menuitem', { name: '200%', exact: true }).click()
    await expect.poll(async () => (await tinyImage.boundingBox())!.width / tinyWidth).toBeCloseTo(2, 1)
    imageZoom = await revealDocumentZoom(page, preview)
    await imageZoom.click()
    await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
    await expect.poll(() => imageZoom.innerText()).toBe('100%')

    await tinyImage.dragTo(input)
    const draggedPreview = page.getByRole('group', { name: 'Pending attachments', exact: true }).getByRole('img')
    await draggedPreview.waitFor({ state: 'visible', timeout: 5000 })
    const draggedBytes = await draggedPreview.evaluate(async (node: HTMLImageElement) =>
      Array.from(new Uint8Array(await (await fetch(node.src)).arrayBuffer())))
    expect(Buffer.from(draggedBytes)).toEqual(TINY_PNG)
    expect(await input.innerText()).toBe('')
    await page.getByRole('button', { name: 'Remove image tiny.png', exact: true }).click()
    const endedDrag = await tinyImage.evaluateHandle((node) => {
      const proof = { token: '', started: false, ended: false }
      window.addEventListener('dragstart', (event) => {
        proof.token = event.dataTransfer!.getData('application/x-dsh-file')
        proof.started = event.isTrusted && proof.token !== ''
      }, { once: true })
      node.addEventListener('dragend', (event) => { proof.ended = event.isTrusted && !node.isConnected }, { once: true })
      return proof
    })
    const tinyRect = (await tinyImage.boundingBox())!
    const inputRect = (await input.boundingBox())!
    await page.mouse.move(tinyRect.x + tinyRect.width / 2, tinyRect.y + tinyRect.height / 2)
    await page.mouse.down()
    await page.mouse.move(tinyRect.x - 20, tinyRect.y, { steps: 4 })
    await expect.poll(() => endedDrag.evaluate(proof => proof.started)).toBe(true)
    const tinyTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('tiny.png', { exact: true }) })
    await tinyTab.locator('[data-dockkit-tab-close]').evaluate((button: HTMLElement) => { button.click() })
    await tinyImage.waitFor({ state: 'detached' })
    await page.mouse.move(inputRect.x + inputRect.width / 2, inputRect.y + inputRect.height / 2, { steps: 5 })
    await page.mouse.up()
    await draggedPreview.waitFor({ state: 'visible', timeout: 5000 })
    expect(Buffer.from(await draggedPreview.evaluate(async (node: HTMLImageElement) =>
      Array.from(new Uint8Array(await (await fetch(node.src)).arrayBuffer()))))).toEqual(TINY_PNG)
    await expect.poll(() => endedDrag.evaluate(proof => proof.ended)).toBe(true)
    await page.getByRole('button', { name: 'Remove image tiny.png', exact: true }).click()
    const retiredToken = await endedDrag.evaluate(proof => proof.token)
    await input.evaluate((node, token) => {
      const dataTransfer = new DataTransfer()
      dataTransfer.setData('application/x-dsh-file', token)
      node.dispatchEvent(new DragEvent('drop', { bubbles: true, dataTransfer }))
    }, retiredToken)
    expect(await draggedPreview.count()).toBe(0)
    await endedDrag.dispose()
    await openFile('large.svg')
    await expect.poll(() => viewer.innerText()).toBe('Image')
    await viewer.click()
    await page.getByRole('menuitem', { name: 'Plain text', exact: true }).waitFor({ timeout: 15_000 })
    await page.keyboard.press('Escape')
    const largeImage = preview.getByRole('img', { name: 'Image preview: large.svg', exact: true })
    await largeImage.waitFor({ state: 'visible', timeout: 15_000 })
    const fitted = await largeImage.evaluate((node) => {
      const image = node as HTMLImageElement
      const scroller = image.closest('[data-textpreview-body]')
      if (scroller === null) throw new Error('image document scroller is unavailable')
      const rect = image.getBoundingClientRect()
      return {
        naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        width: rect.width,
        height: rect.height,
        paneWidth: scroller.clientWidth,
        paneHeight: scroller.clientHeight,
      }
    })
    expect(fitted).toMatchObject({ naturalWidth: 1200, naturalHeight: 1600 })
    expect(fitted.width).toBeLessThan(1200)
    // Width fit: the image fills the frame's 12px-inset box while the aspect ratio holds.
    expect(Math.abs((fitted.paneWidth - 24) - fitted.width)).toBeLessThanOrEqual(1)
    expect(fitted.height / fitted.width).toBeCloseTo(1600 / 1200, 2)
    let svgZoom = await revealDocumentZoom(page, preview)
    await expect.poll(async () => Number.parseInt(await svgZoom.innerText(), 10)).toBeCloseTo(fitted.width / 12, 0)
    const imageScrollport = preview.locator('[data-document-zoom-scrollport]')
    const fitScrolled = await imageScrollport.evaluate((node) => {
      node.scrollLeft = node.scrollWidth
      return { left: node.scrollLeft, horizontalOverflow: node.scrollWidth > node.clientWidth }
    })
    expect(fitScrolled).toEqual({ left: 0, horizontalOverflow: false })
    await svgZoom.click()
    await page.getByRole('menuitem', { name: '100%', exact: true }).click()
    await expect.poll(async () => (await largeImage.boundingBox())!.width).toBeCloseTo(1200, 0)
    expect(await imageScrollport.evaluate(node => node.scrollWidth > node.clientWidth)).toBe(true)
    await imageScrollport.evaluate((node) => { node.scrollLeft = 0; node.scrollTop = 0 })
    const panBox = await imageScrollport.boundingBox()
    if (panBox === null) throw new Error('image viewport missing')
    await expect.poll(() => largeImage.evaluate(node => getComputedStyle(node).cursor)).toBe('grab')
    await page.mouse.move(panBox.x + 180, panBox.y + 180)
    await page.mouse.down()
    await page.mouse.move(panBox.x + 100, panBox.y + 100, { steps: 8 })
    await expect.poll(() => imageScrollport.evaluate(node => [node.scrollLeft, node.scrollTop])).toEqual([80, 80])
    await expect.poll(() => largeImage.evaluate(node => getComputedStyle(node).cursor)).toBe('grabbing')
    await page.mouse.up()
    await expect.poll(() => largeImage.evaluate(node => getComputedStyle(node).cursor)).toBe('grab')
    svgZoom = await revealDocumentZoom(page, preview)
    await svgZoom.click()
    await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
    await expect.poll(async () => (await largeImage.boundingBox())!.width).toBeCloseTo(fitted.width, 0)
    expect(await imageScrollport.evaluate(node => node.scrollWidth > node.clientWidth)).toBe(false)
    expect(await page.locator('html').getAttribute('data-image-preview-escape')).toBeNull()
    sections.push([
      '## Image zoom', '',
      '- Contained sidebar PNG drags into the composer as an original-byte image attachment',
      '- Small PNG fit width remains at intrinsic size; 200% doubles it',
      '- SVG fit width -> 100% -> fit width toggles horizontal overflow: false -> true -> false',
      '- Image and Blob identities remain stable while zoom changes',
      '- Overflowing image drag pans both axes by 80px; releasing restores the grab cursor',
    ].join('\n'))

    const releaseRead = Promise.withResolvers<undefined>()
    let waitingForRead = false
    const readPage = scaffold.ctx.workspaceFiles.read.bind(scaffold.ctx.workspaceFiles)
    const heldRead = vi.spyOn(scaffold.ctx.workspaceFiles, 'read').mockImplementation(async (agent, path, range, signal) => {
      if (path === 'pages.ts' && (range.offset ?? 1) === 1) {
        waitingForRead = true
        await releaseRead.promise
      }
      return readPage(agent, path, range, signal)
    })
    let initialReading = false
    try {
      await openFile('pages.ts')
      await expect.poll(() => waitingForRead).toBe(true)
      const reading = preview.locator('[data-document-loading]')
      await expectDocumentLoading(preview)
      initialReading = await reading.isVisible()
      expect(initialReading).toBe(true)
      expect(await preview.locator('[data-code-preview]').count()).toBe(0)
      const bounds = await reading.evaluate((node) => {
        const body = node.closest('[data-textpreview-body]')
        if (body === null) throw new Error('reading indicator has no document body')
        const indicator = node.getBoundingClientRect()
        const scroller = body.getBoundingClientRect()
        return { top: indicator.top - scroller.top, bottom: scroller.bottom - indicator.bottom }
      })
      expect(bounds.top).toBeGreaterThanOrEqual(0)
      expect(bounds.bottom).toBeGreaterThanOrEqual(0)
      await successShot(page, 'code-reading')
    } finally {
      releaseRead.resolve(undefined)
      heldRead.mockRestore()
    }
    await expect.poll(() => viewer.innerText()).toBe('Code')
    const highlightedLines = preview.locator('.shiki .line')
    await expect.poll(() => highlightedLines.count(), { timeout: 15_000 }).toBe(PAGE_LINES)
    const codeBlock = preview.locator('.md-code-block')
    const codeScrollport = preview.locator('[data-code-block-content]')
    expect(await codeBlock.getAttribute('data-line-numbers')).toBe('true')
    await expect.poll(() => highlightedLines.first().evaluate(node => getComputedStyle(node, '::before').content))
      .not.toMatch(/^(?:none|normal)$/u)
    const numbering = await highlightedLines.first().evaluate((node) => {
      const line = getComputedStyle(node)
      const before = getComputedStyle(node, '::before')
      return {
        counterIncrement: line.counterIncrement,
        gutterWidth: Number.parseFloat(before.width),
        sourceInset: Number.parseFloat(line.paddingInlineStart),
      }
    })
    expect(numbering.counterIncrement).toBe('source-line 1')
    expect(numbering.gutterWidth).toBeGreaterThan(0)
    expect(numbering.sourceInset).toBeGreaterThan(numbering.gutterWidth)
    const prefix = await highlightedLines.allTextContents()
    expect(prefix).toEqual(codeLines.slice(0, PAGE_LINES))
    await expect.poll(() => preview.locator('[data-textpreview-more]').isEnabled()).toBe(true)
    await scrollForNextPage(codeScrollport)
    await expect.poll(() => highlightedLines.count(), { timeout: 15_000 }).toBe(codeLines.length)
    const completed = await highlightedLines.allTextContents()
    expect(completed).toEqual(codeLines)
    await expect.poll(() => preview.locator('[data-textpreview-more]').count()).toBe(0)
    const scrollTop = await codeScrollport.evaluate((node) => {
      const target = Math.floor((node.scrollHeight - node.clientHeight) / 2)
      if (target <= 0) throw new Error('code fixture does not overflow the document body')
      node.scrollTop = target
      return target
    })
    await expect.poll(() => codeScrollport.evaluate((node) => {
      const codeBlock = node.parentElement
      const banner = codeBlock?.firstElementChild
      const firstLine = node.querySelector('.shiki .line')
      if (!(banner instanceof HTMLElement) || firstLine === null) throw new Error('missing rendered code banner or source line')
      const bounds = node.getBoundingClientRect()
      const clipTop = bounds.top + node.clientTop
      const bannerBounds = banner.getBoundingClientRect()
      return {
        scrollTop: node.scrollTop,
        scrollportBelowBanner: Math.abs(bannerBounds.bottom - bounds.top) < 1,
        firstLineAbove: firstLine.getBoundingClientRect().top < clipTop,
      }
    })).toEqual({ scrollTop, scrollportBelowBanner: true, firstLineAbove: true })
    await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], { origin: new URL(page.url()).origin })
    await page.evaluate(() => navigator.clipboard.writeText(''))
    const copyCode = codeBlock.getByRole('button', { name: 'Copy', exact: true })
    expect(await codeBlock.getByRole('button').count()).toBe(1)
    expect(await copyCode.textContent()).toBe('')
    await copyCode.hover()
    await page.getByRole('tooltip', { name: 'Copy', exact: true }).waitFor()
    await copyCode.click()
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(codeLines.join('\n'))
    sections.push([
      '## Code paging', '',
      `- Viewer: ${await viewer.innerText()}`,
      `- Initial reading indicator: ${initialReading}`,
      '- Loading feedback: centered 28px spinner with "Rendering document..."',
      `- Lines: ${prefix.length} -> ${completed.length}`,
      `- Prefix retained: ${String(JSON.stringify(completed.slice(0, prefix.length)) === JSON.stringify(prefix))}`,
      `- Tail: ${completed.at(-1)}`,
    ].join('\n'))

    const officeMenus: number[] = []
    const configurationGuide = 'Read failed: Office previews are unavailable. Enable the document preview service on the computer running DeepSeek Harness.'
    for (const extension of ['doc', 'docx', 'ppt', 'pptx']) {
      await openFile(`unavailable.${extension}`)
      expect(await preview.locator('[data-document-viewer-menu]').count()).toBe(0)
      await preview.getByText(configurationGuide, { exact: true }).waitFor({ timeout: 15_000 })
      expect(await preview.locator('[data-textpreview-line]').count()).toBe(0)
      expect(await preview.getByText('OFFICE_BINARY_PREVIEW', { exact: false }).count()).toBe(0)
      officeMenus.push(await viewer.count())
    }
    await successShot(page, 'office-unavailable')
    sections.push([
      '## Office unavailable', '',
      `- DOC, DOCX, PPT, PPTX viewer menus: ${officeMenus.join(' | ')}`,
      `- Guidance: ${configurationGuide}`,
      '- Binary text shown: false',
      '- Plain-text option and viewer picker: hidden',
    ].join('\n'))

    await openFile('budget.xlsx')
    const excel = preview.locator('[data-excel-preview]')
    const sheetTabs = excel.locator('.luckysheet-sheets-item-name')
    await sheetTabs.getByText('季度预算', { exact: true }).waitFor({ state: 'visible' })
    expect(await sheetTabs.getByText('隐藏页', { exact: true }).isVisible()).toBe(false)
    await successShot(page, 'excel-budget')
    expect(await preview.locator('[data-pdf-preview]').count()).toBe(0)
    expect(await excel.locator('.fortune-toolbar').count()).toBe(0)
    const sheetOverlay = excel.locator('.fortune-sheet-overlay')
    const formulaInput = excel.locator('.fortune-fx-input')
    await sheetOverlay.click({ position: { x: 500, y: 110 } })
    await expect.poll(() => formulaInput.innerText()).toBe('=C3/B3')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('80.0%\n')
    await sheetTabs.getByText('公式与格式', { exact: true }).click()
    await expect.poll(() => excel.locator('.fortune-name-box').innerText()).toBe('A1')
    await sheetOverlay.click({ position: { x: 140, y: 30 } })
    await expect.poll(() => formulaInput.innerText()).toBe('46281')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('2026-09-16\n')
    await sheetOverlay.click({ position: { x: 70, y: 30 } })
    await expect.poll(() => formulaInput.innerText()).toBe('=_xlfn.XLOOKUP(1,{1},{42})')
    expect(await formulaInput.getAttribute('contenteditable')).toBe('false')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('42\n')
    await page.keyboard.type('999')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('42\n')
    await successShot(page, 'excel-cached-formula')
    await openFile('chart-budget.xlsx')
    await sheetTabs.getByText('季度预算', { exact: true }).waitFor({ state: 'visible' })
    const unsupportedNotice = excel.locator('[data-excel-unsupported-notice]')
    const chartNotice = await unsupportedNotice.innerText()
    expect(chartNotice).toBe('This preview does not support charts, conditional formatting in this workbook. Open it in a system application for the full experience.')
    await sheetOverlay.click({ position: { x: 500, y: 110 } })
    await expect.poll(() => formulaInput.innerText()).toBe('=C3/B3')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('80.0%\n')
    await successShot(page, 'excel-chart-notice')
    await openFile('meeting.xlsx')
    await sheetTabs.getByText('会议信息', { exact: true }).waitFor({ state: 'visible' })
    expect(await unsupportedNotice.count()).toBe(0)
    expect(await excel.getByText('Read-only preview', { exact: false }).count()).toBe(0)
    expect(await excel.getByText('Some formulas have no saved result', { exact: false }).count()).toBe(0)
    const formulaWarning = excel.locator('[data-excel-formula-warning]')
    await formulaWarning.hover()
    await page.getByText('This workbook contains formulas. Displayed results may be missing or inaccurate.', { exact: true }).waitFor()
    await sheetTabs.getByText('统计看板', { exact: true }).click()
    await expect.poll(() => excel.locator('.fortune-name-box').innerText()).toBe('A1')
    await successShot(page, 'excel-meeting')
    await openFile('budget.xls')
    await sheetTabs.getByText('预算', { exact: true }).waitFor({ state: 'visible' })
    await expect.poll(() => excel.locator('.fortune-name-box').innerText()).toBe('A1')
    await excel.locator('.fortune-sheet-overlay').click({ position: { x: 70, y: 30 } })
    await expect.poll(() => excel.locator('.fortune-fx-input').innerText()).toBe('旧版预算')
    await page.keyboard.press('ControlOrMeta+C')
    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toContain('旧版预算')
    await sheetTabs.getByText('明细', { exact: true }).click()
    await expect.poll(() => excel.locator('.fortune-name-box').innerText()).toBe('A1')
    await successShot(page, 'excel-legacy')
    await openFile('literal-html.xlsx')
    for (const [sheet, formula, copied] of [
      ['Formula', `="${excelHtmlText}"`, 'saved result'],
      ['Text', excelHtmlText, excelHtmlText],
      ['Cached text', '="cached"', excelHtmlText],
    ] as const) {
      await sheetTabs.getByText(sheet, { exact: true }).click()
      await expect.poll(() => formulaInput.textContent()).toBe(formula)
      expect(await formulaInput.locator('img').count()).toBe(0)
      await excel.locator('.fortune-sheet-overlay').click({ position: { x: 70, y: 30 } })
      await page.keyboard.press('ControlOrMeta+C')
      await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(`${copied}\n`)
      const clipboardTable = excel.locator('#fortune-copy-content table')
      expect(await clipboardTable.locator('td').textContent()).toBe(copied)
      expect(await clipboardTable.locator('img').count()).toBe(0)
      expect(await page.evaluate(() => document.documentElement.dataset.spreadsheetHtml)).toBeUndefined()
    }
    const invalidExcel = 'This spreadsheet could not be opened. Check its format, contents, or password protection.'
    for (const extension of ['xls', 'xlsx']) {
      await openFile(`unavailable.${extension}`)
      await preview.getByText(invalidExcel, { exact: true }).waitFor()
    }
    sections.push([
      '## Browser Excel preview', '',
      '- Opens without the Office conversion service',
      '- Sheets: 季度预算 | 公式与格式; hidden worksheet omitted',
      '- Formula workbooks use a compact warning beside fx; notice rows absent',
      `- Unsupported XLSX content: ${chartNotice}`,
      '- Drawing parts omitted; styled cells and cached formulas retained; notice cleared on file replacement',
      '- Formatted percent copied: 80.0%; date copied: 2026-09-16',
      '- Cached XLOOKUP result copied: 42; typing leaves it unchanged',
      '- Formula bar is read-only; PDF body and editing toolbar absent',
      '- HTML-looking formulas, text, and cached results stay literal; copying retains text and table cells without executing HTML',
      '- XLS: merged title copied; worksheet selection retained',
      `- Invalid XLS/XLSX: ${invalidExcel}`,
    ].join('\n'))

    for (const extension of ['csv', 'tsv']) {
      await openFile(`table.${extension}`)
      await expect.poll(() => viewer.innerText()).toBe('Spreadsheet')
      await excel.getByText(extension.toUpperCase(), { exact: true }).waitFor()
      await excel.locator('.fortune-sheet-overlay').click({ position: { x: 70, y: 30 } })
      await expect.poll(() => excel.locator('.fortune-fx-input').innerText()).toBe('00123')
      await page.keyboard.press('ControlOrMeta+C')
      await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('00123\n')
      await page.keyboard.press('ArrowRight')
      await page.keyboard.press('ArrowRight')
      await page.keyboard.press('ControlOrMeta+C')
      await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('=SUM(1,2)\n')
      await viewer.click()
      await page.getByRole('menuitem', { name: 'Plain text', exact: true }).click()
      await expect.poll(() => preview.locator('[data-textpreview-line]').count()).toBe(2)
      expect((await preview.locator('[data-textpreview-line]').allTextContents()).join('\n')).toContain('00123')
      await viewer.click()
      await page.getByRole('menuitem', { name: 'Spreadsheet', exact: true }).click()
      await excel.getByText(extension.toUpperCase(), { exact: true }).waitFor()
      await writeFile(join(cwd, `table.${extension}`), extension === 'csv' ? '00999,更新' : '00999\t更新')
      await preview.locator('[data-textpreview-tool="reload"]').click()
      await expect.poll(() => excel.locator('.fortune-fx-input').innerText()).toBe('00999')
      await excel.locator('.fortune-sheet-overlay').click({ position: { x: 70, y: 30 } })
      await page.keyboard.press('ControlOrMeta+C')
      await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('00999\n')
      await successShot(page, `excel-${extension}`)
    }
    sections.push(['## Delimited spreadsheets', '',
      '- CSV and TSV default to Spreadsheet; Plain text remains selectable',
      '- Copied ID: 00123; copied literal formula: =SUM(1,2)',
      '- Plain-text round trip retains complete source lines',
      '- Reload replaces parsed cells: 00123 -> 00999',
    ].join('\n'))

    await openFile('notes.unknown')
    const plainLines = preview.locator('[data-textpreview-line]')
    await expect.poll(() => plainLines.count()).toBe(2)
    // Plain text is the only candidate, so no viewer menu renders.
    expect(await viewer.count()).toBe(0)
    const fallback = (await plainLines.allTextContents()).map(line => line.trim())
    expect(fallback).toEqual(['UNKNOWN_SUFFIX', 'Plain fallback.'])
    sections.push(['## Unknown suffix', '', `- Viewer menu hidden: ${String(await viewer.count() === 0)}`, `- Text: ${fallback.join(' | ')}`].join('\n'))

    await filesTab.click()
    await column.locator('[data-files-entry="file"]').getByRole('button', { name: 'clip.mp4', exact: true }).click()
    const unsupported = column.locator('[data-textpreview-state="unsupported"]')
    await unsupported.waitFor({ timeout: 15_000 })
    const unsupportedLine = await unsupported.locator('[data-textpreview-unsupported] p').innerText()
    expect(unsupportedLine).toContain('Preview is not available for this file type yet.')
    expect(await unsupported.locator('[data-textpreview-path]').innerText()).toContain('clip.mp4')
    expect(await unsupported.locator('[data-document-viewer-menu]').count()).toBe(0)
    expect(await unsupported.locator('[data-textpreview-tool="reload"]').count()).toBe(0)
    // The default-application controls land once the Host answered the pinned desktop read.
    const headerOpen = unsupported.locator('[data-open-path-open]')
    await headerOpen.waitFor({ timeout: 15_000 })
    const emptyOpen = unsupported.locator('[data-textpreview-unsupported] [data-open-path-unpreviewable]')
    await emptyOpen.waitFor({ timeout: 15_000 })
    const prominent = unsupported.locator('[data-open-target="file"][data-size="large"]')
    expect((await prominent.boundingBox())?.height).toBe(36)
    expect((await unsupported.locator('[data-open-path]').boundingBox())?.height).toBe(24)
    await successShot(page, 'unsupported')
    sections.push([
      '## Unviewable binary', '',
      '- State: unsupported',
      `- Line: ${unsupportedLine.trim()}`,
      `- Header control has no text: ${String(await headerOpen.innerText() === '')}`,
      `- Empty-state control has text: ${String((await emptyOpen.innerText()).length > 0)}`,
    ].join('\n'))
    if (STUB_OPENER) {
      // Real Host gestures against the stubbed opener: default application from the empty state, reveal from the header menu.
      const clip = join(cwd, 'clip.mp4')
      await emptyOpen.click()
      await expect.poll(async () => (await opened()).length, { timeout: 15_000 }).toBe(1)
      await unsupported.locator('[data-open-path-more]').click()
      await page.getByRole('menuitem', { name: /^Show file location/ }).click()
      await expect.poll(async () => (await opened()).length, { timeout: 15_000 }).toBe(2)
      const gestures = await opened()
      expect(gestures[0]?.action).toBe('open')
      expect([clip, cwd]).toContain(gestures[0]?.path)
      expect(gestures[1]?.action).toBe('reveal')
      expect([clip, cwd]).toContain(gestures[1]?.path)
      if (STUB_OPENER) {
        await expect.poll(() => headerOpen.locator('img').count()).toBe(1)
        await prominent.getByRole('button', { name: 'More ways to open' }).click()
        await page.getByRole('menuitem', { name: 'Test Player (default)', exact: true }).waitFor()
        await compareOrRefreshGolden(join(SNAPSHOT_DIR, 'applications.expected.md'), await page.getByRole('menu').ariaSnapshot(), MODE)
        await page.getByRole('menuitem', { name: 'Other Player', exact: true }).click()
        await expect.poll(async () => (await opened()).length).toBe(3)
        expect((await opened())[2]).toEqual({ path: clip, action: 'application' })
        await headerOpen.click()
        await expect.poll(async () => (await opened()).length).toBe(4)
        expect((await opened())[3]).toEqual({ path: clip, action: 'open' })
        // The reported defect: the Shell lists applications but marks none as the OS default.
        // Clear the OS default marker for this platform: LaunchServices reports it inside the
        // catalog on macOS, while `gio mime` owns it on Linux.
        if (process.platform === 'linux') await writeFile(linuxMimeDefault, '')
        else await writeFile(appsCatalog, JSON.stringify([
          { id: '/Applications/Test Player.app', name: 'Test Player', default: false, icon: `data:image/png;base64,${TINY_PNG.toString('base64')}` },
          { id: '/Applications/Other Player.app', name: 'Other Player', default: false, icon: null },
        ]))
        // Leave the file and come back: the shared association state is discarded when the
        // last control for a path unmounts, so the marker is read again instead of reused.
        await openPreviewFile(column, filesTab, preview, 'notes.unknown')
        await openPreviewFile(column, filesTab, preview, 'clip.mp4')
        await unsupported.waitFor({ timeout: 15_000 })
        await emptyOpen.waitFor({ timeout: 15_000 })
        // Opening the menu settles the re-read association before the labels are compared.
        await prominent.getByRole('button', { name: 'More ways to open' }).click()
        await page.getByRole('menuitem', { name: 'Test Player (default)', exact: true }).waitFor()
        await page.keyboard.press('Escape')
        expect(await emptyOpen.innerText()).toBe('Open')
        expect(await headerOpen.getAttribute('aria-label')).toBe('Open in Test Player')
        await compareOrRefreshGolden(join(SNAPSHOT_DIR, 'applications-no-default.expected.md'), await prominent.ariaSnapshot(), MODE)
        const gesturesBefore = (await opened()).length
        const launchesBefore = (await launched()).length
        await emptyOpen.click()
        await expect.poll(async () => (await opened()).length).toBe(gesturesBefore + 1)
        // Without an OS-marked default the main action opens the application this control
        // names, rather than the OS association (which can prompt or pick another app).
        expect((await opened()).at(-1)).toEqual({ path: clip, action: 'application' })
        await expect.poll(async () => (await launched()).length).toBe(launchesBefore + 1)
        expect((await launched()).at(-1)?.app).toBe(launchTarget)
        await prominent.getByRole('button', { name: 'More ways to open' }).click()
        await page.getByRole('menuitem', { name: 'Test Player (default)', exact: true }).click()
        await expect.poll(async () => (await launched()).length).toBe(launchesBefore + 2)
        expect((await launched()).at(-1)?.app).toBe(launchTarget)
        await expect.poll(async () => (await opened()).length).toBe(gesturesBefore + 2)
        expect((await opened()).at(-1)).toEqual({ path: clip, action: 'application' })
      }
      // Gesture facts stay out of the golden: the stub does not run on Windows.
      expect(await page.getByRole('alert').count()).toBe(0)
    }
    expect(tripwire.pageErrors).toEqual([])
    expect(tripwire.warnings).toEqual([])
    await compareOrRefreshGolden(EXPECTED, sections.join('\n\n'), MODE)
    await assertFixtureInventory(SNAPSHOT_DIR, ['document.expected.md', 'applications.expected.md', 'applications-no-default.expected.md', 'paging.patch.yml'])
  })

  it('preserves Markdown reading position beyond the first page after automatic and manual refresh', async () => {
    onTestFailed(() => saveFailureShot(page, `screenshots/0908-document-preview/refresh-scroll-${process.pid}`))
    if (await page.getByText('LIGHTHOUSE', { exact: true }).count() === 0) {
      const settled = scaffold.whenTurnSettled()
      const input = page.locator('[data-composer-input]').first()
      await input.fill(PROMPT)
      await input.press('Enter')
      await settled
      await page.getByText('LIGHTHOUSE', { exact: true }).waitFor()
    }
    const cwd = scaffold.ctx.agents.list()[0]?.session.header.cwd
    if (cwd === undefined) throw new Error('Session has no workspace cwd')
    const path = join(cwd, 'refresh-scroll.md')
    const markdown = '# Before refresh\n\n' + Array.from({ length: PAGE_LINES * 2 }, (_, index) => `Paragraph ${index + 1}\n`).join('\n')
    await writeFile(path, markdown)
    const column = page.locator('[data-rightbar-col]')
    const expand = page.locator('[data-sidebar-right-expand]')
    if (await expand.isVisible()) await expand.click()
    const filesTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('Files', { exact: true }) })
    if (await filesTab.count() === 0) await column.locator('[data-sidebar-right-guide-entry="files"]').click()
    await filesTab.click()
    await column.locator('[data-files-reload]').click()
    const preview = column.locator('[data-textpreview-url]')
    await openPreviewFile(column, filesTab, preview, 'refresh-scroll.md')
    const body = preview.locator('[data-textpreview-body]')
    const heading = body.getByRole('heading', { level: 1 })
    await expect.poll(() => heading.textContent()).toBe('Before refresh')
    await expect.poll(() => preview.locator('[data-textpreview-more]').isEnabled()).toBe(true)
    const target = await body.evaluate(node => node.scrollHeight + 100)
    await scrollForNextPage(body)
    await expect.poll(() => body.evaluate(node => node.scrollHeight - node.clientHeight)).toBeGreaterThan(target)
    await body.evaluate((node, top) => new Promise<void>((resolve) => {
      node.addEventListener('scroll', () => { resolve() }, { once: true })
      node.scrollTop = top
    }), target)
    const original = await body.evaluate(node => node.scrollTop)
    expect(original).toBe(target)
    // Content growing above the viewport keeps the pixel offset instead of following the content.
    await heading.evaluate((node) => { node.style.paddingTop = '300px' })
    await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))))
    expect(await body.evaluate(node => node.scrollTop)).toBe(original)
    await heading.evaluate((node) => { node.style.paddingTop = '' })

    await writeFile(path, markdown.replace('Before refresh', 'After  refresh'))
    await expect.poll(() => heading.textContent()).toBe('After  refresh')
    await expect.poll(() => body.evaluate((node, top) => Math.abs(node.scrollTop - top), original)).toBeLessThanOrEqual(1)

    const rendered = await heading.elementHandle()
    await preview.locator('[data-textpreview-tool="reload"]').click()
    await expect.poll(() => rendered!.evaluate(node => node.isConnected)).toBe(false)
    await expect.poll(() => heading.textContent()).toBe('After  refresh')
    await expect.poll(() => body.evaluate((node, top) => Math.abs(node.scrollTop - top), original)).toBeLessThanOrEqual(1)
    await rendered!.dispose()
    expect(tripwire.pageErrors).toEqual([])
  })
})

describe.skipIf(MODE === 'record')('web e2e: Host Office preview', () => {
  let scaffold: WebScaffold
  let browser: Browser
  let page: Page

  afterAll(async () => {
    try { await browser?.close() } finally { await scaffold?.close() }
  })

  it('rejects renamed text and renders Chinese Office documents through the PDF worker', async () => {
    scaffold = await launchWebScaffold({ replayFixture: FIXTURE, paceMs: 5, compareReplaySession: false,
      extraOverlayPath: [
        fileURLToPath(new URL('../../../packages/client/ui-sidebar-documentpreview/tests/fixtures/office-cache.patch.yml', import.meta.url)),
        fileURLToPath(new URL('./pin-browse-picker.overlay.yml', import.meta.url)),
      ],
    })
    browser = await chromium.launch()
    page = await browser.newPage({ viewport: { width: 1680, height: 1000 }, deviceScaleFactor: 2,
      locale: 'en-US', timezoneId: 'Asia/Shanghai' })
    const tripwire = watchConsole(page)
    await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
    await connectFreshWorkspace(page, scaffold.workspaceCwd)
    onTestFailed(async () => {
      await saveFailureShot(page, `screenshots/0908-document-preview/office-${process.pid}`)
    })
    const settled = scaffold.whenTurnSettled()
    const input = page.locator('[data-composer-input]').first()
    await input.fill(PROMPT)
    await input.press('Enter')
    const sessionId = await settled
    const cwd = scaffold.ctx.agents.get(sessionId)?.session.header.cwd
    if (cwd === undefined) throw new Error('settled Session has no workspace cwd')
    await Promise.all([
      writeFile(join(cwd, 'renamed.docx'), 'This is plain text renamed to docx.'),
      writeFile(join(cwd, 'chinese.docx'), realOfficeBytes('docx', 'DSH Missing Preview Font')),
      writeFile(join(cwd, 'chinese.pptx'), realOfficeBytes('pptx')),
      ...(['doc', 'ppt'] as const).map(extension => writeFile(join(cwd, `chinese.${extension}`), realOfficeBytes(extension))),
      ...['doc', 'ppt'].map(extension => writeFile(join(cwd, `renamed.${extension}`), 'Plain text is not a binary Office document.')),
    ])
    const releaseConversion = Promise.withResolvers<undefined>()
    const convertOffice = scaffold.ctx.officeToPdf.convert.bind(scaffold.ctx.officeToPdf)
    const convert = vi.spyOn(scaffold.ctx.officeToPdf, 'convert').mockImplementationOnce(async (...args) => {
      await releaseConversion.promise
      return convertOffice(...args)
    })
    try {
      const column = page.locator('[data-rightbar-col]')
      await page.locator('[data-sidebar-right-expand]').click()
      await column.locator('[data-sidebar-right-guide-entry="files"]').click()
      await column.locator('[data-files-state="tree"]').waitFor({ state: 'visible' })
      await column.locator('[data-files-reload]').click()
      const filesTab = column.locator('[data-dockkit-tab]').filter({ has: page.getByText('Files', { exact: true }) })
      const preview = column.locator('[data-textpreview-url]')
      await column.locator('[data-files-entry="file"]').getByRole('button', { name: 'chinese.docx', exact: true }).click()
      for (const colorScheme of ['dark', 'light'] as const) {
        await page.emulateMedia({ colorScheme })
        await expect.poll(() => page.locator('body').getAttribute('data-ds-dark-theme')).toBe(colorScheme === 'dark' ? '' : null)
        await expectDocumentLoading(preview)
        await successShot(page, `office-loading-${colorScheme}`)
      }
      const pdfResponse = page.waitForResponse(
        response => new URL(response.url()).pathname === '/api/officeToPdf/render',
        { timeout: 60_000 },
      )
      releaseConversion.resolve(undefined)
      const officeTransfer = await pdfResponse
      expect(officeTransfer.headers()['content-type']).toMatch(/^multipart\/form-data;/)
      const officeBody = await new Response(new Uint8Array(await officeTransfer.body()), { headers: officeTransfer.headers() }).formData()
      const officeMetadata = officeBody.get('metadata')
      if (typeof officeMetadata !== 'string') throw new Error('missing Office PDF metadata')
      const { attachments } = JSON.parse(officeMetadata) as { attachments: { path: (string | number)[]; codec: string; part: string }[] }
      expect(attachments).toHaveLength(1)
      expect(attachments[0]).toMatchObject({ path: ['data'], codec: 'bytes' })
      const officeFile = officeBody.get(attachments[0]!.part)
      if (officeFile === null || typeof officeFile === 'string') throw new Error('missing Office PDF payload')
      const officePdf = Buffer.from(await officeFile.arrayBuffer())
      expect(officePdf.subarray(0, 5).toString('ascii')).toBe('%PDF-')
      expect(officePdf.subarray(-1024).toString('ascii').trimEnd()).toMatch(/%%EOF$/u)
      expect(await preview.locator('[data-document-viewer-menu]').count()).toBe(0)
      const canvas = preview.getByRole('img', { name: 'PDF page 1', exact: true })
      await canvas.waitFor({ state: 'visible', timeout: 60_000 })
      const backgroundZoom = await revealDocumentZoom(page, preview)
      await backgroundZoom.click()
      await page.getByRole('menuitem', { name: '50%', exact: true }).click()
      await expect.poll(() => backgroundZoom.innerText()).toBe('50%')
      await expectPdfResolution(canvas)
      for (const colorScheme of ['dark', 'light'] as const) {
        await page.emulateMedia({ colorScheme })
        await expect.poll(() => preview.locator('[data-pdf-preview]').evaluate(node => getComputedStyle(node).backgroundColor))
          .toBe(colorScheme === 'dark' ? 'rgb(21, 21, 23)' : 'rgb(235, 238, 242)')
        await expectPdfPageSpacing(preview)
        await copyPdfText(page, preview, '中文文档')
        await successShot(page, `office-background-${colorScheme}`)
      }
      await (await revealDocumentZoom(page, preview)).click()
      await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
      await expectPdfResolution(canvas)
      await expect.poll(() => canvas.evaluate((node) => {
        const canvas = node as HTMLCanvasElement
        const context = canvas.getContext('2d')
        if (context === null) return false
        const bytes = context.getImageData(0, 0, canvas.width, canvas.height).data
        for (let index = 0; index < bytes.length; index += 4) {
          if (bytes[index + 3] === 255 && bytes[index]! < 200 && bytes[index + 1]! < 200 && bytes[index + 2]! < 200) return true
        }
        return false
      }), { timeout: 30_000 }).toBe(true)
      const workerNames = await Promise.all(page.workers().map(worker => worker.evaluate(() => self.name)))
      expect(workerNames).toContain('dsh-pdf')
      expect(workerNames.some(name => /libreoffice|soffice/i.test(name))).toBe(false)
      await copyPdfText(page, preview, 'Office preview')
      await copyPdfText(page, preview, '中文文档')
      expect((await preview.locator('[data-pdf-text]').allTextContents()).join('')).toContain('中文文档')
      const zoomMenu = await revealDocumentZoom(page, preview)
      const initialWidth = (await canvas.boundingBox())!.width
      const intrinsicWidth = await canvas.evaluate(node => Number.parseFloat(node.style.getPropertyValue('--pdf-page-width')))
      const fitPercent = `${String(Math.round(initialWidth / intrinsicWidth * 100))}%`
      await expect.poll(() => zoomMenu.innerText()).toBe(fitPercent)
      await zoomMenu.click()
      await page.getByRole('menuitem', { name: '150%', exact: true }).click()
      await expect.poll(() => zoomMenu.innerText()).toBe('150%')
      await expect.poll(async () => (await canvas.boundingBox())!.width / intrinsicWidth).toBeCloseTo(1.5, 1)
      await expectPdfResolution(canvas)
      const zoomScrollport = preview.locator('[data-document-zoom-scrollport]')
      await zoomScrollport.evaluate((node) => {
        const bounds = node.getBoundingClientRect()
        node.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, ctrlKey: true,
          deltaY: -10, clientX: bounds.left + bounds.width / 2, clientY: bounds.top + bounds.height / 2 }))
      })
      await expect.poll(() => zoomMenu.innerText()).toBe('166%')
      await expect.poll(async () => (await canvas.boundingBox())!.width / intrinsicWidth).toBeCloseTo(1.66, 1)
      await expectPdfResolution(canvas)
      await zoomScrollport.evaluate((node) => { node.scrollTop = 0; node.scrollLeft = 0 })
      await copyPdfText(page, preview, '中文文档')
      await successShot(page, 'office-zoom-redrawn')
      await zoomMenu.click()
      await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
      await expect.poll(() => zoomMenu.innerText()).toBe(fitPercent)
      await expectPdfResolution(canvas)
      await zoomScrollport.evaluate((node) => { node.scrollTop = 0; node.scrollLeft = 0 })
      await zoomScrollport.evaluate(async (node) => {
        const bounds = node.getBoundingClientRect()
        for (let step = 0; step < 8; step++) {
          node.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, ctrlKey: true,
            deltaY: -40, clientX: bounds.left + bounds.width / 2, clientY: bounds.top + bounds.height / 2 }))
          await new Promise<void>(resolve => requestAnimationFrame(() => { resolve() }))
        }
      })
      await expect.poll(() => zoomMenu.innerText()).toBe('400%')
      expect(await zoomScrollport.evaluate(node => node.scrollLeft > node.clientWidth)).toBe(true)
      await expectPdfResolution(canvas)
      await zoomScrollport.evaluate((node) => { node.scrollTop = 0; node.scrollLeft = 0 })
      await successShot(page, 'office-pinch-400')
      await zoomMenu.click()
      await page.getByRole('menuitem', { name: 'Fit width', exact: true }).click()
      await expectPdfResolution(canvas)
      expect(convert).toHaveBeenCalledTimes(1)
      await preview.getByRole('button', { name: 'Read the file again', exact: true }).click()
      await canvas.waitFor({ state: 'visible' })
      expect(convert).toHaveBeenCalledTimes(1)
      const warning = preview.locator('[data-office-font-warning]').getByRole('button')
      await warning.waitFor({ state: 'visible' })
      expect(await warning.getAttribute('aria-expanded')).toBe('false')
      expect(await page.getByRole('dialog', { name: 'Missing fonts', exact: true }).count()).toBe(0)
      const warningBox = (await warning.boundingBox())!
      const reload = preview.getByRole('button', { name: 'Read the file again', exact: true })
      const reloadBox = (await reload.boundingBox())!
      expect(warningBox.x + warningBox.width).toBeLessThanOrEqual(reloadBox.x)
      expect(Math.abs(warningBox.y + warningBox.height / 2 - reloadBox.y - reloadBox.height / 2)).toBeLessThan(1)
      expect([warningBox.width, warningBox.height]).toEqual([reloadBox.width, reloadBox.height])
      expect(await warning.evaluate(node => getComputedStyle(node).borderRadius))
        .toBe(await reload.evaluate(node => getComputedStyle(node).borderRadius))
      expect(await warning.locator('svg').evaluate(node => node.getBoundingClientRect().width))
        .toBe(await reload.locator('svg').evaluate(node => node.getBoundingClientRect().width))
      const warningColor = await warning.evaluate(node => getComputedStyle(node).color)
      await warning.hover()
      expect(await warning.evaluate(node => getComputedStyle(node).color)).toBe(warningColor)
      await page.getByRole('tooltip', { name: /Missing fonts:/ }).waitFor({ state: 'visible' })
      const before = await canvas.evaluate(node => node.getBoundingClientRect().top)
      await successShot(page, 'office-font-warning')
      await warning.click()
      const details = page.getByRole('dialog', { name: 'Missing fonts', exact: true })
      await details.getByText('DSH Missing Preview Font', { exact: true }).waitFor({ state: 'visible' })
      expect(await page.getByRole('tooltip', { name: /Missing fonts:/ }).count()).toBe(0)
      await successShot(page, 'office-font-details')
      await page.keyboard.press('Escape')
      await expect.poll(() => details.count()).toBe(0)
      expect(await warning.evaluate(node => node === document.activeElement)).toBe(true)
      await warning.click()
      await page.getByRole('button', { name: 'Close font details', exact: true }).click()
      expect(await warning.isVisible()).toBe(true)
      const after = await canvas.evaluate(node => node.getBoundingClientRect().top)
      expect(after).toBe(before)
      const topInset = await preview.evaluate((node) => {
        const body = node.querySelector('[data-textpreview-body]')!.getBoundingClientRect()
        const canvas = node.querySelector('canvas')!.getBoundingClientRect()
        return canvas.top - body.top
      })
      expect(topInset).toBe(12)
      await expectPdfPageSpacing(preview)
      await compareOrRefreshGolden(fileURLToPath(new URL('./expected/office-font-notice.md', import.meta.url)), [
        '# Office font warning', '',
        '- Document preparation: centered 28px spinner with visible rendering status in both themes',
        '- Text selection: translucent blue with transparent overlay text in both themes; Chinese text copies unchanged',
        '- Document backdrop: cool light grey in light mode; matte black in dark mode',
        '- Word and PowerPoint paper layout: 12px page gaps and outer backdrop insets',
        '- Warning precedes reload in the same toolbar: true',
        '- Warning and reload share button geometry and icon size: true',
        '- Details open only on request: true',
        '- Requested absent family is listed: true',
        '- Escape restores focus to the warning: true',
        '- Closing details preserves the warning and document position: true',
        '- Fit width, presets, and pinch resize the Office PDF continuously: true',
        '- Settled zoom redraws the Office PDF at device resolution: true',
        '- Continuous pinch to 400% redraws the page after horizontal panning: true',
        '- Pinch updates the displayed percentage during the gesture: 166%',
        `- Document top inset: ${topInset}px`,
      ].join('\n'), MODE)
      await successShot(page, 'office-docx')
      for (const extension of ['doc', 'ppt', 'pptx']) {
        await openPreviewFile(column, filesTab, preview, `chinese.${extension}`)
        await preview.getByRole('img', { name: 'PDF page 1', exact: true }).waitFor({ state: 'visible', timeout: 60_000 })
        await expect.poll(async () => (await preview.locator('[data-pdf-text]').allTextContents()).join(''), { timeout: 30_000 }).toContain('中文文档')
        if (extension === 'pptx') await expectPdfPageSpacing(preview)
        const officeZoom = await revealDocumentZoom(page, preview)
        await officeZoom.click()
        await page.getByRole('menuitem', { name: '150%', exact: true }).click()
        await expectPdfResolution(canvas)
        if (extension === 'pptx') await copyPdfText(page, preview, '中文文档')
        if (['doc', 'ppt'].includes(extension)) expect(await warning.count()).toBe(0)
        if (extension === 'pptx') {
          await preview.locator('[data-document-zoom-scrollport]').evaluate((node) => {
            const second = node.querySelector('[data-pdf-page="2"]')!.getBoundingClientRect()
            node.scrollTop += second.top - node.getBoundingClientRect().top - node.clientHeight / 2
          })
          for (const colorScheme of ['dark', 'light'] as const) {
            await page.emulateMedia({ colorScheme })
            await expect.poll(() => page.locator('body').getAttribute('data-ds-dark-theme')).toBe(colorScheme === 'dark' ? '' : null)
            await expectPdfPageSpacing(preview)
            await successShot(page, `office-pptx-spacing-${colorScheme}`)
          }
        }
        await successShot(page, `office-${extension}`)
      }
      expect(convert).toHaveBeenCalledTimes(4)
      await openPreviewFile(column, filesTab, preview, 'chinese.docx')
      await preview.getByRole('img', { name: 'PDF page 1', exact: true }).waitFor({ state: 'visible' })
      await preview.getByRole('button', { name: 'Read the file again', exact: true }).click()
      await expect.poll(() => convert.mock.calls.length).toBe(5)
      await preview.getByRole('img', { name: 'PDF page 1', exact: true }).waitFor({ state: 'visible' })
      await openPreviewFile(column, filesTab, preview, 'renamed.docx')
      await preview.getByText('Read failed: This Office file cannot be previewed. It may be damaged, password protected, or have the wrong extension.', { exact: true }).waitFor({ timeout: 30_000 })
      expect(await preview.locator('[data-textpreview-line]').count()).toBe(0)
      await successShot(page, 'office-invalid')
      expect(convert).toHaveBeenCalledTimes(6)
      for (const extension of ['doc', 'ppt']) {
        await openPreviewFile(column, filesTab, preview, `renamed.${extension}`)
        await preview.getByText('Read failed: This Office file cannot be previewed. It may be damaged, password protected, or have the wrong extension.', { exact: true }).waitFor({ timeout: 30_000 })
        expect(await preview.locator('[data-textpreview-line]').count()).toBe(0)
      }
      expect(convert).toHaveBeenCalledTimes(8)
      expect(tripwire.pageErrors).toEqual([])
    } finally {
      releaseConversion.resolve(undefined)
      await Promise.allSettled(convert.mock.results.filter(result => result.type === 'return').map(result => result.value))
      convert.mockRestore()
    }
  })
})