test/browser.js

// Real-browser UI test (chromium via playwright-core). Drives the actual editor:
// login, typing, selection -> comment/suggest, margin cards, images, discussion.
//   node test/browser.js
import { spawn } from 'node:child_process'
import fs from 'node:fs'
import path from 'node:path'
import assert from 'node:assert'
import { fileURLToPath } from 'node:url'
import { chromium } from 'playwright-core'

const root = path.join(path.dirname(fileURLToPath(import.meta.url)), '..')
const PORT = 3299
const BASE = `http://localhost:${PORT}`
const DATA = path.join(root, '.browser-data')
const SHOT = process.env.SHOT_DIR || '/tmp/claude-1000/ui-shots'

fs.rmSync(DATA, { recursive: true, force: true })
fs.mkdirSync(SHOT, { recursive: true })

const server = spawn('node', ['server/index.js'], {
  cwd: root,
  env: { ...process.env, PORT: String(PORT), DATA_DIR: DATA, OAUTH_CLIENT_ID: '', OAUTH_CLIENT_SECRET: '' },
  stdio: ['ignore', 'pipe', 'pipe'],
})
server.stderr.on('data', d => process.stderr.write('[server] ' + d))

// Put the caret at the end of the document without depending on where things
// happen to sit: Playwright clicks an element's centre, and if an atom node (a
// formula, an image) is there, the click opens THAT instead of placing a caret.
async function focusDocEnd(page) {
  // Put the caret at the end of the document, reliably. Two traps here:
  //  - typing before the document has synced loses those keystrokes, because
  //    the remote state then replaces them (the skeleton lifting is the signal);
  //  - editor.commands.focus() sets the selection but does NOT take DOM focus
  //    in headless Chromium, so the keystrokes go to the body instead.
  // Hence a real click, at a point that is always text: the title line. Clicking
  // the element's centre would be a gamble — an atom (a formula, an image)
  // sitting there swallows the click and every keystroke after it.
  await page.waitForFunction(() => document.getElementById('doc-skeleton')?.classList.contains('hidden'), null, { timeout: 20000 })
  await page.waitForFunction(() => window.__editor && !window.__editor.isDestroyed)
  await page.click('.tiptap', { position: { x: 24, y: 10 } })
  await page.waitForFunction(() => window.__editor?.isFocused, null, { timeout: 5000 })
  await page.keyboard.press('Control+End')
}

const consoleErrors = []

async function main() {
  await waitFor(async () => (await fetch(`${BASE}/healthz`)).ok, 'server')

  const browser = await chromium.launch({
    headless: true,
    executablePath: process.env.PW_EXECUTABLE || undefined,
    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--single-process'],
  })
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })
  page.on('console', msg => {
    if (msg.type() === 'error' && !msg.text().includes('fonts.googleapis') && !msg.text().includes('fonts.gstatic')) {
      consoleErrors.push(msg.text())
    }
  })
  page.on('pageerror', err => consoleErrors.push('PAGEERROR: ' + err.message))

  // --- login + create doc, from the switcher rather than an index page ---
  await page.goto(`${BASE}/auth/dev?u=alice&next=/`)
  // With no documents yet, / has nowhere to send us and serves the bare shell.
  // The switcher's loading state has to be in the markup the server sends, not
  // built by JS — that is what makes it visible on the first frame.
  const shellHtml = await (await page.request.get(`${BASE}/`)).text()
  assert.ok((shellHtml.match(/sk-card/g) || []).length >= 3, 'shell ships skeleton cards for the switcher')
  assert.ok(shellHtml.includes('id="docs-list" class="loading"'), 'switcher list starts in its loading state')
  assert.ok(shellHtml.includes('window.__BOOT'), 'shell inlines the session')
  await page.waitForSelector('#docs-pop:not(.hidden)', { timeout: 10000 })
  // Nothing will ever sync here, so the skeleton the shell ships has to come
  // down explicitly — left up, a first visit reads as a document stuck loading.
  await waitFor(async () => await page.evaluate(
    () => document.getElementById('doc-skeleton')?.classList.contains('hidden')),
    'the skeleton comes down on a first visit with no documents')
  assert.ok(await page.$('.empty-doc'), 'the empty sheet says how to make the first document')
  await page.click('#new-doc')
  await page.waitForSelector('.ui-modal input')
  await page.fill('.ui-modal input', 'Browser Test Doc')
  await page.keyboard.press('Enter')
  await page.waitForURL('**/d/**')
  await page.waitForSelector('.tiptap', { timeout: 10000 })
  console.log('✓ login + doc creation from the switcher + editor mounted')

  // --- the shell paints a loading state, and carries the session inline ---
  const bootInline = await page.evaluate(() => !!window.__BOOT?.user)
  assert.ok(bootInline, 'the session is inlined in the shell (no /api/me round trip)')
  const meCalls = await page.evaluate(() =>
    performance.getEntriesByType('resource').filter(r => r.name.endsWith('/api/me')).length
  )
  assert.equal(meCalls, 0, 'no /api/me request was needed')
  const assets = await page.evaluate(() =>
    performance.getEntriesByType('resource')
      .filter(r => /\.(js|css)\?v=/.test(r.name))
      .map(r => ({ name: r.name.split('/').pop(), enc: r.encodedBodySize, dec: r.decodedBodySize }))
  )
  assert.ok(assets.length >= 2, 'versioned assets were fetched: ' + JSON.stringify(assets))
  for (const a of assets) {
    assert.ok(a.enc > 0 && a.enc < a.dec * 0.6, `${a.name} arrived compressed (${a.enc} of ${a.dec} bytes)`)
  }
  console.log('✓ shell: session inlined, bundles served compressed')

  // --- theme: light by default, toggle sticks across a reload ---
  const themeState = () =>
    page.evaluate(() => {
      const sum = c => (c.match(/\d+/g) || []).slice(0, 3).reduce((t, n) => t + +n, 0)
      return {
        theme: document.documentElement.dataset.theme,
        stored: localStorage.getItem('cw-theme'),
        bg: sum(getComputedStyle(document.body).backgroundColor),
        ink: sum(getComputedStyle(document.querySelector('.tiptap')).color),
        page: sum(getComputedStyle(document.getElementById('editor')).backgroundColor),
      }
    })
  const lightState = await themeState()
  assert.equal(lightState.theme, 'light', 'starts light when the OS is light: ' + JSON.stringify(lightState))
  assert.ok(lightState.bg > 700 && lightState.ink < 60, 'light: pale canvas, black ink: ' + JSON.stringify(lightState))
  await page.click('#theme-btn')
  await waitFor(async () => (await themeState()).theme === 'dark', 'toggle switches to dark')
  const darkState = await themeState()
  assert.ok(darkState.bg < 160 && darkState.ink > 600, 'dark: dark canvas, light ink: ' + JSON.stringify(darkState))
  assert.ok(darkState.page < 200 && darkState.page > darkState.bg, 'dark: the sheet sits above the canvas: ' + JSON.stringify(darkState))
  assert.equal(darkState.stored, 'dark', 'choice is stored')
  await page.reload()
  await page.waitForSelector('.tiptap')
  const afterReload = await themeState()
  assert.equal(afterReload.theme, 'dark', 'dark survives a reload (no light flash path)')
  await page.click('#theme-btn')
  await waitFor(async () => (await themeState()).theme === 'light', 'toggle switches back to light')
  console.log('✓ theme: OS default, toggle to dark, persists, toggles back')

  // register an agent handle (agents live in a header popover now)
  await page.click('#agents-btn')
  await page.fill('#agent-handle', 'ui-agent')
  await page.click('#agent-form button')
  await page.waitForSelector('.agent-row')
  // registration issues a one-time agent key
  await page.waitForSelector('.key-box code', { timeout: 5000 })
  const shownKey = await page.textContent('.key-box code')
  assert.ok(shownKey.startsWith('ak_'), 'agent key shown once: ' + shownKey.slice(0, 6))
  // a second handle, so the @ menu has a list to arrow through
  await page.fill('#agent-handle', 'ui-agent-two')
  await page.click('#agent-form button')
  await waitFor(async () => (await page.textContent('#agents-list')).includes('ui-agent-two'), 'second agent registered')
  await waitFor(async () => (await page.$$('.key-box code')).length > 1, 'second agent key issued')
  const shownKeyTwo = (await page.$$eval('.key-box code', els => els.map(e => e.textContent)))[1]
  assert.ok(shownKeyTwo.startsWith('ak_') && shownKeyTwo !== shownKey, 'second agent has its own key')
  await page.click('#agents-btn') // close
  console.log('✓ agents registered via header panel, key issued')

  // --- sharing UI ---
  await page.click('#share-btn')
  await page.waitForSelector('#share-pop:not(.hidden)')
  await waitFor(async () => (await page.textContent('#share-list')).includes('owner'), 'share list shows owner')
  await page.fill('#share-user', 'bob')
  await page.click('#share-form button')
  await waitFor(async () => (await page.textContent('#share-list')).includes('bob'), 'bob added to share list')
  await page.click('#share-btn') // close
  console.log('✓ share panel: add collaborator')

  // --- LaTeX math: typed, typeset by KaTeX, source editable ---
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('Einstein said $E = mc^2$ and meant it.')
  await page.waitForSelector('.tiptap .math-inline', { timeout: 5000 })
  // KaTeX is lazy: it must NOT be in the main bundle, and must arrive on demand
  await waitFor(async () => await page.evaluate(() => !!window.katex), 'katex loads on demand')
  const katexFetches = await page.evaluate(() =>
    performance.getEntriesByType('resource').filter(r => /katex\.(js|css)/.test(r.name)).map(r => r.name.split('/').pop())
  )
  assert.equal(katexFetches.length, 2, 'katex js + css fetched separately from the main bundle: ' + katexFetches)
  await page.waitForSelector('.tiptap .math-inline .katex', { timeout: 5000 })
  const rendered = await page.textContent('.tiptap .math-inline .katex')
  assert.ok(rendered.includes('E') && rendered.includes('mc'), 'formula is typeset, not raw source: ' + rendered)
  assert.ok(!(await page.textContent('.tiptap')).includes('$E = mc^2$'), 'the $ delimiters are gone from the text')

  // double-clicking a formula opens its LaTeX source; Enter commits the edit
  await page.dblclick('.tiptap .math-inline .math-view')
  await page.waitForSelector('.tiptap .math-inline.editing .math-src', { timeout: 5000 })
  assert.equal(await page.inputValue('.math-inline.editing .math-src'), 'E = mc^2', 'the source is what you edit')
  await page.fill('.math-inline.editing .math-src', 'E = mc^3')
  await page.keyboard.press('Enter')
  await waitFor(async () => (await page.textContent('.tiptap .math-inline .katex')).includes('mc'), 'edited formula re-renders')
  assert.ok(!(await page.$('.math-inline.editing')), 'Enter closes the source editor')

  // a display formula from $$ on its own line
  await focusDocEnd(page) // the caret was in the previous formula's source input
  await page.keyboard.press('Enter')
  await page.keyboard.type('$$')
  await page.waitForSelector('.tiptap .math-block', { timeout: 5000 })
  await page.waitForSelector('.tiptap .math-block.editing .math-src', { timeout: 5000 })
  await page.fill('.math-block.editing .math-src', '\\int_0^1 x^2 dx')
  await page.keyboard.press('Enter')
  await page.waitForSelector('.tiptap .math-block .katex-display', { timeout: 5000 })
  console.log('✓ math: $x$ typesets via lazily-loaded KaTeX, source click-to-edit, $$ display block')

  // --- a formula can be selected and commented on ---
  // Single click selects it (that is how you comment on one) and must NOT open
  // the source editor; focusing the comment box must not dismiss the selection.
  await page.click('.tiptap .math-inline .math-view')
  const picked = await page.evaluate(() => ({
    editing: document.querySelectorAll('.math-inline.editing').length,
    selNode: window.__editor.state.selection.node?.type?.name || null,
  }))
  assert.equal(picked.editing, 0, 'a single click does not open the source editor')
  assert.equal(picked.selNode, 'mathInline', 'a single click selects the formula: ' + JSON.stringify(picked))
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
  await page.click('#composer-text')
  await page.waitForTimeout(300)
  assert.ok(await page.isVisible('#composer'), 'focusing the comment box does not dismiss the formula selection')
  // the quote shows the formula source, not an empty string
  const mathQuote = await page.textContent('#composer-quote')
  assert.ok(mathQuote.includes('mc'), 'the comment quotes the formula source: ' + JSON.stringify(mathQuote))
  await page.fill('#composer-text', '@ui-agent is this the right constant?')
  await page.click('#composer-send')
  await waitFor(async () => (await page.textContent('#margin-items')).includes('right constant'), 'comment on a formula posts')
  // close it: later assertions count the open threads on this document
  await page.click('.card.thread.expanded .close-btn')
  await waitFor(async () => !(await page.$('.card.thread')), 'this test cleans up its thread')
  console.log('✓ math: single click selects a formula, comment box keeps the selection and quotes the source')

  // dragging a text selection through a formula must work, not open the editor
  const dragBox = await page.evaluate(() => {
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.querySelector('.math-inline'))
    const r = p.getBoundingClientRect()
    return { x1: r.left + 4, x2: r.right - 4, y: r.top + r.height / 2 }
  })
  await page.mouse.move(dragBox.x1, dragBox.y)
  await page.mouse.down()
  await page.mouse.move(dragBox.x2, dragBox.y, { steps: 20 })
  await page.mouse.up()
  const dragged = await page.evaluate(() => {
    const sel = window.__editor.state.selection
    let hasMath = false
    window.__editor.state.doc.nodesBetween(sel.from, sel.to, n => {
      if (n.type.name === 'mathInline') hasMath = true
    })
    return { empty: sel.empty, hasMath, editing: document.querySelectorAll('.editing').length }
  })
  assert.ok(!dragged.empty && dragged.hasMath, 'a drag selects through the formula: ' + JSON.stringify(dragged))
  assert.equal(dragged.editing, 0, 'dragging over a formula does not open its editor')
  console.log('✓ math: text selection drags straight through a rendered formula')

  // double click is what opens the source
  await page.dblclick('.tiptap .math-inline .math-view')
  await page.waitForSelector('.math-inline.editing .math-src', { timeout: 5000 })
  await page.keyboard.press('Escape')
  await waitFor(async () => !(await page.$('.math-inline.editing')), 'Escape closes the source editor')
  console.log('✓ math: double click opens the source, Escape closes it')

  // it must survive a reload — i.e. it is really in the shared document
  await page.reload()
  await page.waitForSelector('.tiptap .math-inline .katex', { timeout: 15000 })
  await page.waitForSelector('.tiptap .math-block .katex-display', { timeout: 15000 })
  console.log('✓ math persists across a reload (stored in the collaborative doc)')

  // --- loading skeleton ---
  const docHtml = await (await page.request.get(page.url())).text()
  assert.ok(docHtml.includes('id="doc-skeleton"') && (docHtml.match(/sk-line/g) || []).length > 3,
    'the doc shell ships the skeleton sheet in its markup')
  assert.ok(docHtml.includes('<span id="doc-title">Browser Test Doc</span>'), 'the shell carries the real title, not a placeholder')
  // plain fetch: no browser cookie jar, so this is a stranger asking
  const anonHtml = await (await fetch(page.url())).text()
  assert.ok(!anonHtml.includes('Browser Test Doc'), 'a shell for someone without access carries no title')
  const sk = await page.evaluate(() => {
    const el = document.getElementById('doc-skeleton')
    return el ? { exists: true, hidden: el.classList.contains('hidden'), lines: el.querySelectorAll('.sk-line').length } : { exists: false }
  })
  assert.ok(sk.exists && sk.lines > 3, 'the doc shell ships a skeleton sheet: ' + JSON.stringify(sk))
  assert.ok(sk.hidden, 'the skeleton is lifted once the document has synced')
  console.log('✓ loading: skeleton sheet ships in the shell and lifts after sync')

  // --- type into the editor ---
  await focusDocEnd(page)
  await page.keyboard.type('The quick brown fox jumps over the lazy dog.')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('quick brown fox'), 'typed text')
  console.log('✓ typing works')

  // --- double-click a word: the comment box opens without moving the document ---
  // Put the word at the bottom of a short viewport, where scrollIntoView() on
  // the margin composer used to drag the whole page down to reveal the box.
  await page.setViewportSize({ width: 1440, height: 500 })
  const wordPoint = await page.evaluate(() => {
    const needle = 'quick'
    const walker = document.createTreeWalker(document.querySelector('.tiptap'), NodeFilter.SHOW_TEXT)
    let node
    while ((node = walker.nextNode())) {
      const index = node.textContent.indexOf(needle)
      if (index < 0) continue
      const range = document.createRange()
      range.setStart(node, index)
      range.setEnd(node, index + needle.length)
      const rect = range.getBoundingClientRect()
      window.scrollBy(0, rect.bottom - (window.innerHeight - 20))
      const placed = range.getBoundingClientRect()
      return { x: placed.left + placed.width / 2, y: placed.top + placed.height / 2 }
    }
    throw new Error('quick not found')
  })
  await page.mouse.dblclick(wordPoint.x, wordPoint.y)
  await page.waitForFunction(() => !window.__editor.state.selection.empty)
  const scrollBeforeComposer = await page.evaluate(() => window.scrollY)
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
  assert.ok(await page.isHidden('#selection-menu'), 'no floating selection widget on desktop')
  await page.waitForTimeout(300)
  const scrollAfterComposer = await page.evaluate(() => window.scrollY)
  assert.equal(scrollAfterComposer, scrollBeforeComposer, 'opening the comment box preserves document scroll')
  const composerTop = parseFloat(await page.evaluate(() => document.getElementById('composer').style.top))
  assert.ok(composerTop > 30, `composer aligned to anchored text, not at column top (top=${composerTop})`)
  // it comes pre-mentioning my first agent, and must NOT have taken the keyboard
  const prefilled = await page.inputValue('#composer-text')
  assert.equal(prefilled, '@ui-agent ', 'comment box pre-mentions my first agent: ' + JSON.stringify(prefilled))
  const focusStillInDoc = await page.evaluate(() => !!document.activeElement?.closest('.tiptap'))
  assert.ok(focusStillInDoc, 'auto-opened box does not steal focus from the document')
  await page.fill('#composer-text', '@ui-agent please review this phrase')
  await page.click('#composer-send')
  await page.waitForSelector('.card.thread.expanded', { timeout: 5000 })
  await waitFor(async () => (await page.textContent('#margin-items')).includes('please review'), 'thread text')
  await page.waitForSelector('.card.thread .chip', { timeout: 15000 })
  await page.waitForSelector('.tiptap .comment-hl', { timeout: 5000 })
  await page.waitForSelector('.tiptap .comment-range-active', { timeout: 5000 })
  const commentLocator = await page.evaluate(() => {
    const block = document.querySelector('.tiptap .comment-range-active')
    const bar = getComputedStyle(block, '::after')
    return { width: parseFloat(bar.width), height: parseFloat(bar.height), color: bar.backgroundColor }
  })
  assert.ok(commentLocator.width >= 3 && commentLocator.height > 10 && commentLocator.color !== 'rgba(0, 0, 0, 0)', 'active comment has a visible block-height gutter marker: ' + JSON.stringify(commentLocator))
  await page.setViewportSize({ width: 1440, height: 900 })
  console.log('✓ comment card created: chip + text underline + active gutter marker visible')

  // --- Enter sends a comment, Shift+Enter adds a line ---
  await selectText(page, 'brown fox jumps')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
  await page.click('#composer-text')
  await page.fill('#composer-text', '')
  await page.keyboard.type('first line')
  await page.keyboard.down('Shift')
  await page.keyboard.press('Enter')
  await page.keyboard.up('Shift')
  await page.keyboard.type('second line')
  const twoLines = await page.inputValue('#composer-text')
  assert.ok(twoLines.includes('\n'), 'Shift+Enter adds a newline: ' + JSON.stringify(twoLines))
  assert.ok(await page.isVisible('#composer'), 'Shift+Enter does not send')
  await page.keyboard.press('Enter')
  await waitFor(async () => await page.isHidden('#composer'), 'Enter sends the comment')
  await waitFor(async () => (await page.textContent('#margin-items')).includes('second line'), 'both lines posted')
  console.log('✓ comment composer: Enter sends, Shift+Enter adds a line')

  // the reply box behaves the same way
  await page.click('.card.thread')
  await page.waitForSelector('.card.thread.expanded .reply-row textarea', { timeout: 5000 })
  const replyBox = '.card.thread.expanded .reply-row textarea'
  await page.click(replyBox)
  await page.keyboard.type('reply one')
  await page.keyboard.down('Shift')
  await page.keyboard.press('Enter')
  await page.keyboard.up('Shift')
  await page.keyboard.type('reply two')
  assert.ok((await page.inputValue(replyBox)).includes('\n'), 'Shift+Enter adds a line in a reply')
  await page.keyboard.press('Enter')
  await waitFor(async () => (await page.textContent('.card.thread')).includes('reply two'), 'Enter sends the reply')
  assert.equal(await page.inputValue(replyBox), '', 'the reply box clears after sending')
  // close it again: later assertions count the open threads, and this test's
  // own thread would otherwise look like a second discussion
  await page.click('.card.thread.expanded .close-btn')
  await waitFor(async () => (await page.$$('.card.thread')).length === 1, 'this test cleans up its thread')
  console.log('✓ reply box: Enter sends, Shift+Enter adds a line')

  // --- @ menu: arrows pick an agent, no mouse needed ---
  await selectText(page, 'over the lazy')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
  await page.click('#composer-text')
  await page.fill('#composer-text', '')
  await page.keyboard.type('@ui')
  await page.waitForSelector('#composer-mentions:not(.hidden)', { timeout: 5000 })
  const menuOrder = await page.evaluate(() =>
    [...document.querySelectorAll('#composer-mentions .mention-item')].map(d => d.textContent.trim())
  )
  assert.deepEqual(menuOrder, ['@ui-agent', '@ui-agent-two'], 'both handles offered: ' + menuOrder.join(','))
  const firstSelected = await page.evaluate(
    () => document.querySelector('#composer-mentions .mention-item')?.classList.contains('selected')
  )
  assert.ok(firstSelected, 'first agent is preselected')
  await page.keyboard.press('ArrowDown')
  const secondSelected = await page.evaluate(
    () => [...document.querySelectorAll('#composer-mentions .mention-item')][1]?.classList.contains('selected')
  )
  assert.ok(secondSelected, 'ArrowDown moves the selection')
  await page.keyboard.press('Enter')
  const afterEnter = await page.inputValue('#composer-text')
  assert.equal(afterEnter, '@ui-agent-two ', 'Enter inserts the arrowed-to handle: ' + JSON.stringify(afterEnter))
  assert.ok(await page.isHidden('#composer-mentions'), '@ menu closes after picking')
  await page.click('#composer-cancel')
  console.log('✓ @ menu: own agents first, preselected, arrow keys + Enter pick')

  // --- a connected agent is the one the box hands work to ---
  // ui-agent-two starts polling; presence is derived from that long-poll, so it
  // is now the only agent that would pick a mention up right away.
  const pollAbort = new AbortController()
  const polling = fetch(`${BASE}/api/mentions/stream?wait=20`, {
    headers: { authorization: `Bearer ${shownKeyTwo}` },
    signal: pollAbort.signal,
  }).catch(() => {})
  await waitFor(async () => {
    const agents = await page.evaluate(async () => {
      const r = await fetch(`/api/agents?doc=${location.pathname.split('/').pop()}`)
      return (await r.json()).agents
    })
    return agents.find(a => a.handle === 'ui-agent-two')?.online === true
  }, 'ui-agent-two shows as online')

  await selectText(page, 'quick brown fox')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
  // the box refreshes presence when it opens, so the mention corrects itself
  await waitFor(
    async () => (await page.inputValue('#composer-text')) === '@ui-agent-two ',
    'comment box pre-mentions the CONNECTED agent, not merely the first one'
  )
  // and the @ menu puts it at the top, where Enter lands
  await page.fill('#composer-text', '')
  await page.type('#composer-text', '@ui-')
  await page.waitForSelector('#composer-mentions:not(.hidden)', { timeout: 5000 })
  const onlineFirst = await page.evaluate(() =>
    [...document.querySelectorAll('#composer-mentions .mention-item')].map(d => d.textContent.trim())
  )
  assert.deepEqual(onlineFirst, ['@ui-agent-two', '@ui-agent'], 'connected agent ranks first: ' + onlineFirst.join(','))
  await page.keyboard.press('Escape')
  await page.click('#composer-cancel')
  pollAbort.abort()
  await polling
  console.log('✓ connected agent is preferred: pre-mention + top of the @ menu')

  // collapse on outside click
  await page.mouse.click(40, 500)
  await waitFor(async () => !(await page.$('.card.thread.expanded')), 'card collapses')
  console.log('✓ cards collapse when clicking away')

  // --- the human suggest UI is hidden until proposing means editing inline ---
  assert.ok(await page.isHidden('#mode-switch'), 'Editing/Suggesting switch is hidden')
  assert.ok(await page.isHidden('#suggest-btn'), 'Suggest button is hidden')
  assert.ok(await page.evaluate(() => window.__editor.isEditable), 'the document stays directly editable')
  // The Space runs in an iframe where native dialogs are suppressed — the app
  // must never open one (everything goes through the in-app ui* helpers now).
  page.on('dialog', d => {
    throw new Error('native dialog opened: ' + d.message())
  })
  // suggestions themselves are unchanged — post one the way an agent does, then
  // check the whole reviewing flow on top of it
  const suggested = await page.evaluate(async () => {
    const id = location.pathname.split('/d/')[1].split('/')[0]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const idx = (snap.blocks || []).findIndex(b => (b.markdown || '').includes('lazy dog'))
    const res = await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        block_index: idx,
        replacement_markdown: 'The quick brown fox jumps over the **energetic** dog.',
        rationale: 'more positive energy',
      }),
    })
    return { idx, ...(await res.json()) }
  })
  assert.ok(suggested.idx >= 0 && suggested.suggestion_id, 'suggestion posted on the typed block: ' + JSON.stringify(suggested))
  await page.waitForSelector('.card.suggestion', { timeout: 5000 })
  await page.click('.card.suggestion')
  await page.waitForSelector('.card.suggestion.expanded', { timeout: 5000 })
  console.log('✓ suggest UI hidden; document editable; suggestion arrives from the API')

  // inline track-changes rendering in the document
  await page.waitForSelector('.tiptap .sugg-ins', { timeout: 5000 })
  // wait for the decoration set to settle: the widgets appear as it is rebuilt,
  // so reading the first paint was always a race
  await waitFor(
    async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-ins')].map(n => n.textContent).join(' '))).includes('energetic'),
    'inserted words shown inline'
  )
  await waitFor(
    async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-del')].map(n => n.textContent).join(' '))).includes('lazy'),
    'deleted words struck through inline'
  )
  // slim card: accept/reject in the header, no diff repetition
  assert.ok(await page.$('.card.suggestion .accept-btn'), 'accept button in card header')
  assert.ok(!(await page.$('.card.suggestion .udiff')), 'card does not repeat the diff')
  console.log('✓ suggestion rendered inline (strikethrough + insertion); card is slim')

  // --- discuss the suggestion (guide the agent) ---
  await page.fill('.card.suggestion .reply-row textarea', '@ui-agent could you keep the dog lazy though?')
  await page.click('.card.suggestion .reply-row button')
  await waitFor(async () => (await page.textContent('.card.suggestion')).includes('keep the dog lazy'), 'discussion message')
  // the discussion thread must NOT appear as a separate card
  const threadCards = await page.$$('.card.thread')
  assert.equal(threadCards.length, 1, 'suggestion discussion is embedded, not a separate card')
  console.log('✓ discussion on suggestion (embedded thread)')

  // --- collapse, then accept straight from the collapsed card ---
  await page.mouse.click(40, 500)
  await waitFor(async () => !(await page.$('.card.suggestion.expanded')), 'suggestion card collapsed')
  assert.ok(await page.locator('.card.suggestion .accept-btn').isVisible(), 'accept visible while collapsed')
  // active-highlight: click the card, inline marks gain .active
  await page.click('.card.suggestion .head .who')
  await waitFor(async () => (await page.$('.tiptap .sugg-ins.active')) !== null, 'active suggestion emphasized inline')
  await page.click('.card.suggestion .accept-btn')
  // (the inline insertion widget also contains the word — wait for the real applied mark)
  await waitFor(async () => (await page.innerHTML('.tiptap')).includes('<strong>energetic</strong>'), 'suggestion applied with marks')
  console.log('✓ suggestion accepted -> text replaced with marks')



  // closed items are hidden by default, shown with the toggle
  await waitFor(async () => !(await page.$('.card.suggestion')), 'accepted suggestion hidden')
  await page.check('#show-resolved')
  await page.waitForSelector('.card.suggestion', { timeout: 5000 })
  assert.ok((await page.textContent('.card.suggestion')).includes('accepted'), 'status visible when shown')
  await page.uncheck('#show-resolved')
  console.log('✓ closed items hidden by default, toggle shows them')

  // --- undo the accept: text reverts AND the suggestion reopens ---
  await page.click('#undo-btn')
  await waitFor(async () => !(await page.innerHTML('.tiptap')).includes('<strong>energetic</strong>'), 'undo reverts accepted text')
  await page.waitForSelector('.card.suggestion', { timeout: 5000 }) // visible again => open
  await waitFor(async () => (await page.$('.tiptap .sugg-ins')) !== null, 'inline diff back after reopen')
  console.log('✓ undo reverts the accept and reopens the suggestion')

  // accept again to continue (straight from the collapsed card)
  await page.click('.card.suggestion .accept-btn')
  await waitFor(async () => (await page.innerHTML('.tiptap')).includes('<strong>energetic</strong>'), 're-accept applies')
  console.log('✓ re-accept after undo works')

  // --- accepting while the collaboration socket is down ---
  // The accept endpoint is plain HTTP: it still answers when the websocket is
  // gone. Trusting a dead tab's "I applied it locally" marked suggestions
  // accepted while their content was silently dropped, which is how six
  // accepted entries vanished from a real document.
  const offlineSugg = await page.evaluate(async () => {
    const id = location.pathname.split('/').filter(Boolean)[1]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const bi = snap.blocks.findIndex(b => b.markdown.includes('paragraph'))
    return await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: bi < 0 ? 1 : bi, replacement_markdown: 'Written while the socket was down.' }),
    })).json()
  })
  assert.ok(offlineSugg.suggestion_id, 'offline-case suggestion posted')
  await page.waitForSelector('.card.suggestion .accept-btn', { timeout: 8000 })
  await page.evaluate(() => window.__provider.disconnect())
  await waitFor(async () => !(await page.evaluate(() => document.getElementById('conn').classList.contains('on'))), 'connection indicator goes off')
  await page.click('.card.suggestion .accept-btn')
  await page.waitForSelector('.ui-modal-scrim', { timeout: 8000 })
  assert.match(await page.textContent('.ui-modal-msg'), /not connected/i, 'accepting offline warns instead of silently failing')
  await page.keyboard.press('Escape') // dismiss, or the modal blocks the clicks below
  const stillOpen = await page.evaluate(async sid => {
    const id = location.pathname.split('/').filter(Boolean)[1]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    return snap.suggestions.find(x => x.id === sid)?.status
  }, offlineSugg.suggestion_id)
  assert.equal(stillOpen, 'open', 'a suggestion is not marked accepted while the tab cannot save')
  assert.ok(await page.$('#offline-notice'), 'a disconnected tab says so')

  // reconnect: the same accept now works end to end
  await page.evaluate(() => window.__provider.connect())
  await waitFor(async () => !!(await page.evaluate(() => document.getElementById('conn').classList.contains('on'))), 'reconnected')
  await waitFor(async () => !(await page.$('#offline-notice')), 'offline notice clears on reconnect')
  await page.click('.card.suggestion .accept-btn')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('Written while the socket was down.'), 'accept applies after reconnect')
  console.log('✓ accepts are refused (not silently lost) while the socket is down, and work after reconnect')

  // --- image upload ---
  const png = Buffer.from(
    'iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVR4nGP8z8Dwn4EIwESMolGFtFEIAK5+AxGmizXcAAAAAElFTkSuQmCC',
    'base64'
  )
  fs.writeFileSync(`${SHOT}/test.png`, png)
  const [chooser] = await Promise.all([page.waitForEvent('filechooser'), page.click('#image-btn')])
  await chooser.setFiles(`${SHOT}/test.png`)
  await page.waitForSelector('.tiptap img:not(.ProseMirror-separator)', { timeout: 10000 })
  const src = await page.getAttribute('.tiptap img:not(.ProseMirror-separator)', 'src')
  assert.ok(src.startsWith('/files/'), 'image served from /files: ' + src)
  const imgRes = await page.evaluate(async u => (await fetch(u)).status, src)
  assert.equal(imgRes, 200, 'image fetchable')
  console.log('✓ image upload + render')

  // --- reply + resolve on the standalone thread ---
  await page.click('.card.thread')
  await page.waitForSelector('.card.thread.expanded', { timeout: 5000 })
  await page.fill('.card.thread .reply-row textarea', 'looks good, thanks!')
  await page.click('.card.thread .reply-row button')
  await waitFor(async () => (await page.textContent('.card.thread')).includes('looks good'), 'reply visible')
  console.log('✓ reply works')

  // --- list scenario: agent adds one item, only that item shows as inserted ---
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('- alpha')
  await page.keyboard.press('Enter')
  await page.keyboard.type('beta')
  await page.keyboard.press('Enter')
  await page.keyboard.type('gamma')
  await page.waitForTimeout(400)
  const listSugg = await page.evaluate(async () => {
    const id = location.pathname.split('/').pop()
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const li = snap.blocks.findIndex(b => b.markdown.includes('alpha'))
    return (await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: li, replacement_markdown: '- alpha\n- beta\n- gamma\n- delta' }),
    })).json())
  })
  assert.ok(listSugg.ok, 'list suggestion: ' + JSON.stringify(listSugg))
  await waitFor(async () => {
    const spans = await page.$$eval('.tiptap .sugg-ins', els => els.map(e => e.textContent))
    return spans.some(t => t.includes('delta'))
  }, 'list insertion inline')
  const delSpans = await page.$$eval('.tiptap .sugg-del', els => els.map(e => e.textContent).filter(t => ['alpha', 'beta', 'gamma'].some(w => t.includes(w))))
  assert.equal(delSpans.length, 0, 'unchanged list items are NOT struck through: ' + JSON.stringify(delSpans))
  // typing a new block right after the suggested range must not get highlighted
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.press('Enter') // second Enter exits the list into a fresh paragraph
  await page.keyboard.type('untouched trailing line')
  await page.waitForTimeout(400)
  const trailingCls = await page.evaluate(() => {
    const blocks = [...document.querySelectorAll('.tiptap > *')]
    const t = blocks.find(b => b.textContent.includes('untouched trailing line'))
    return t ? t.className || '' : 'MISSING'
  })
  assert.ok(!trailingCls.includes('suggestion-hl') && !trailingCls.includes('sugg-del') && trailingCls !== 'MISSING', 'new trailing block not highlighted: ' + trailingCls)
  await page.evaluate(async sid => {
    const id = location.pathname.split('/').pop()
    await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
  }, listSugg.suggestion_id)
  console.log('✓ list suggestion: only the added item renders as inserted')

  // --- new blocks (heading + list) render FORMATTED in the insertion panel ---
  const blockSugg = await page.evaluate(async () => {
    const id = location.pathname.split('/').pop()
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const li = snap.blocks.findIndex(b => b.markdown.includes('alpha'))
    return (await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        block_index: li,
        replacement_markdown: snap.blocks[li].markdown + '\n\n## Sources\n\n- one **bold** source',
      }),
    })).json())
  })
  assert.ok(blockSugg.ok, 'block suggestion: ' + JSON.stringify(blockSugg))
  await page.waitForSelector('.tiptap .sugg-ins-block', { timeout: 5000 })
  assert.ok(await page.$('.tiptap .sugg-ins-block h2'), 'inserted heading renders as a heading')
  assert.ok(await page.$('.tiptap .sugg-ins-block ul li strong'), 'inserted list renders as bullets with marks')
  await page.evaluate(async sid => {
    const id = location.pathname.split('/').pop()
    await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
  }, blockSugg.suggestion_id)
  console.log('✓ new blocks render formatted (heading, bullets, marks) in the insertion panel')

  // --- formatting-only changes are visible, and inserted runs keep their marks ---
  // The inline diff used to compare mark-stripped text: a suggestion that only
  // linked (or bolded) an existing word looked completely identical, so the
  // document showed no diff at all and the card seemed to propose nothing.
  const markCases = [
    { label: 'link', md: 'A paragraph to [link up](https://example.com/ref) here.', sel: '.tiptap .sugg-ins a[href="https://example.com/ref"]' },
    { label: 'bold', md: 'A paragraph to **link up** here.', sel: '.tiptap .sugg-ins strong' },
    { label: 'code', md: 'A paragraph to `link up` here.', sel: '.tiptap .sugg-ins code' },
  ]
  // its own paragraph, verified to be a standalone block: the point of these
  // cases is that ONLY the formatting differs from the replacement markdown
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('A paragraph to link up here.')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('A paragraph to link up here.'), 'mark-case paragraph typed')
  await waitFor(async () => {
    const md = await page.evaluate(async () => {
      const id = location.pathname.split('/').filter(Boolean)[1]
      const snap = await (await fetch(`/api/docs/${id}`)).json()
      const b = snap.blocks.find(x => x.markdown.includes('A paragraph to link up here.'))
      return b?.markdown
    })
    return md === 'A paragraph to link up here.'
  }, 'the paragraph is its own block (formatting-only cases need an exact match)')
  for (const c of markCases) {
    const sugg = await page.evaluate(async md => {
      const id = location.pathname.split('/').filter(Boolean)[1]
      const snap = await (await fetch(`/api/docs/${id}`)).json()
      const bi = snap.blocks.findIndex(b => b.markdown.includes('A paragraph to link up here.'))
      return await (await fetch(`/api/docs/${id}/suggestions`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ block_index: bi, replacement_markdown: md, rationale: 'formatting only' }),
      })).json()
    }, c.md)
    assert.ok(sugg.suggestion_id, `${c.label} suggestion posted: ` + JSON.stringify(sugg))
    // the old run is struck AND the new run is inserted with its formatting
    await page.waitForSelector(c.sel, { timeout: 8000 })
    const marked = await page.evaluate(sel => {
      const ins = document.querySelector(sel)
      return { text: ins.textContent, deleted: [...document.querySelectorAll('.tiptap .sugg-del')].map(n => n.textContent) }
    }, c.sel)
    assert.equal(marked.text, 'link up', `${c.label}: inserted run carries the text`)
    assert.ok(marked.deleted.some(t => t.includes('link up')), `${c.label}: the unformatted run is struck through: ${JSON.stringify(marked.deleted)}`)
    await page.evaluate(async sid => {
      const id = location.pathname.split('/').filter(Boolean)[1]
      await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
    }, sugg.suggestion_id)
    await waitFor(async () => !(await page.$(c.sel)), `${c.label} suggestion cleared`)
  }
  console.log('✓ formatting-only suggestions (link / bold / code) render as visible diffs')

  // a link inside a *proposed* change must not navigate away on a plain click
  const linkSugg = await page.evaluate(async () => {
    const id = location.pathname.split('/').filter(Boolean)[1]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const bi = snap.blocks.findIndex(b => b.markdown.includes('A paragraph to link up here.'))
    return await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: bi, replacement_markdown: 'A paragraph to [link up](https://example.com/ref) here.' }),
    })).json()
  })
  assert.ok(linkSugg.suggestion_id, 'preview-link suggestion posted')
  await page.waitForSelector('.tiptap .sugg-ins a[href]', { timeout: 8000 })
  const urlBefore = page.url()
  await page.click('.tiptap .sugg-ins a[href]')
  await page.waitForTimeout(500)
  assert.equal(page.url(), urlBefore, 'clicking a suggested link stays on the page')
  assert.ok(await page.$('.card.suggestion.expanded'), 'clicking a suggested link opens its card instead')
  // accepting turns it into a real link in the document
  await page.click('.card.suggestion.expanded .accept-btn')
  await waitFor(async () => !!(await page.$('.tiptap a[href="https://example.com/ref"]')), 'accepted link is a real link')
  await waitFor(async () => {
    const md = await page.evaluate(async () => {
      const id = location.pathname.split('/').filter(Boolean)[1]
      return (await (await fetch(`/api/docs/${id}`)).json()).markdown
    })
    return md.includes('[link up](https://example.com/ref)')
  }, 'accepted link round-trips to markdown')
  console.log('✓ suggested links preview safely, then accept into real links')

  // --- dissimilar rewrite: struck old block + formatted panel, never a flat text blob ---
  const dis = await page.evaluate(async () => {
    const id = location.pathname.split('/').pop()
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const li = snap.blocks.findIndex(b => b.markdown.includes('untouched trailing line'))
    return (await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: li, replacement_markdown: '## Appendix\n\nCompletely different content here.' }),
    })).json())
  })
  assert.ok(dis.ok, 'dissimilar suggestion: ' + JSON.stringify(dis))
  await waitFor(async () => (await page.$$('.tiptap .sugg-ins-block')).length >= 1, 'panel for dissimilar rewrite')
  assert.ok(await page.$('.tiptap .sugg-del-block'), 'unrelated old block struck wholesale')
  const flatIns = await page.$$eval('.tiptap .sugg-ins', els => els.map(e => e.textContent).filter(t => t.includes('Appendix')))
  assert.equal(flatIns.length, 0, 'heading is not flat inline text')
  assert.ok(await page.$$eval('.tiptap .sugg-ins-block', els => els.some(e => e.querySelector('h2'))), 'panel contains a real heading')
  await page.evaluate(async sid => {
    const id = location.pathname.split('/').pop()
    await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
  }, dis.suggestion_id)
  console.log('✓ dissimilar rewrites: whole-block strike + formatted panel (no raw blob)')

  // --- typing at a suggestion boundary pushes the insertion panel down ---
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('ordering base line')
  await page.waitForTimeout(400)
  const push = await page.evaluate(async () => {
    const id = location.pathname.split('/').pop()
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const li = snap.blocks.findIndex(b => b.markdown.includes('ordering base line'))
    return (await (await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: li, replacement_markdown: 'ordering base line\n\n## Pushed Panel' }),
    })).json())
  })
  assert.ok(push.ok, JSON.stringify(push))
  await waitFor(async () => (await page.textContent('.tiptap')).includes('Pushed Panel'), 'panel appears')
  await page.evaluate(() => {
    const e = window.__editor
    let pos = null
    e.state.doc.descendants((node, p) => {
      if (node.isText && node.text.includes('ordering base line')) pos = p + node.text.length
    })
    e.chain().focus().setTextSelection(pos).run()
  })
  await page.keyboard.press('Enter')
  await page.keyboard.type('pushes the panel')
  await page.waitForTimeout(500)
  const domOrder = await page.evaluate(() => {
    const kids = [...document.querySelector('.tiptap').children].map(el =>
      el.className.includes('sugg-ins-block') ? 'PANEL' : el.textContent.slice(0, 25)
    )
    return kids.slice(kids.findIndex(t => t.includes('ordering base')))
  })
  assert.ok(
    domOrder.indexOf('PANEL') > domOrder.findIndex(t => t.includes('pushes the panel')),
    'typed line lands ABOVE the panel (pushes it down): ' + JSON.stringify(domOrder)
  )
  await page.evaluate(async sid => {
    const id = location.pathname.split('/').pop()
    await fetch(`/api/docs/${id}/suggestions/${sid}/reject`, { method: 'POST' })
  }, push.suggestion_id)
  console.log('✓ typing at the boundary pushes the insertion panel down')

  // --- zoom ---
  const baseSize = await page.evaluate(() => parseFloat(getComputedStyle(document.querySelector('.tiptap')).fontSize))
  await page.click('#zoom-in')
  const zoomedSize = await page.evaluate(() => parseFloat(getComputedStyle(document.querySelector('.tiptap')).fontSize))
  assert.ok(zoomedSize > baseSize, `zoom-in grows text (${baseSize} -> ${zoomedSize})`)
  await page.click('#zoom-out')
  console.log('✓ zoom controls')

  // --- the sheet is a page: fixed width, panels fold for it, zoom magnifies it ---
  // Regression guards for three things that used to be wrong: the sheet shrank
  // with the window (so the measure changed as you resized), zoom moved the type
  // but not the page, and nothing gave way before the document did.
  const geom = () =>
    page.evaluate(() => {
      const col = document.getElementById('editor-col')
      return {
        sheet: Math.round(document.getElementById('editor').getBoundingClientRect().width),
        font: parseFloat(getComputedStyle(document.querySelector('.tiptap')).fontSize),
        pages: !document.getElementById('sidebar').classList.contains('hidden'),
        comments: !document.getElementById('margin-col').classList.contains('hidden'),
        pageArrow: document.getElementById('sidebar-toggle').getBoundingClientRect().width > 0,
        sidebarWidth: Math.round(document.getElementById('sidebar').getBoundingClientRect().width),
        sidebarRight: Math.round(document.getElementById('sidebar').getBoundingClientRect().right),
        sheetLeft: Math.round(document.getElementById('editor').getBoundingClientRect().left),
        sheetRight: Math.round(document.getElementById('editor').getBoundingClientRect().right),
        textRight: Math.round(document.getElementById('editor').getBoundingClientRect().right -
          parseFloat(getComputedStyle(document.getElementById('editor')).paddingRight)),
        commentsLeft: Math.round(document.getElementById('margin-col').getBoundingClientRect().left),
        appliedOverlap: Math.round(parseFloat(getComputedStyle(document.documentElement)
          .getPropertyValue('--margin-applied-overlap')) || 0),
        colScroll: col.scrollWidth - col.clientWidth,
        colWidth: col.clientWidth,
        bodyOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
      }
    })
  const resizeTo = async width => {
    await page.setViewportSize({ width, height: 900 })
    await page.waitForTimeout(250)
    return geom()
  }

  const wide = await resizeTo(1440)
  assert.ok(wide.pages && wide.comments, 'both side panels fit at 1440')
  assert.ok(!wide.pageArrow, 'the Pages arrow is absent while the sidebar fits')
  assert.ok(Math.abs(wide.sheetLeft - wide.sidebarRight - 20) <= 2,
    `the sidebar fills the full gutter up to the page (${wide.sidebarRight} -> ${wide.sheetLeft})`)
  assert.ok(Math.abs(wide.commentsLeft - wide.sheetRight - 20) <= 2 && wide.appliedOverlap === 0,
    `comments stay outside the page while there is room (${wide.sheetRight} -> ${wide.commentsLeft})`)

  const sheetW = wide.sheet

  // The page stays fixed while every additional wide-screen pixel belongs to
  // Pages — there is no dead strip between a fixed nav and the document.
  const extraWide = await resizeTo(1600)
  assert.ok(extraWide.sidebarWidth >= wide.sidebarWidth + 150,
    `the sidebar grows with the gutter (${wide.sidebarWidth} -> ${extraWide.sidebarWidth})`)

  // Borrowing the page's right margin lets Pages survive at 1280, where it
  // previously disappeared even though the comments could safely move inward.
  const resilient = await resizeTo(1280)
  assert.strictEqual(resilient.sheet, sheetW, `the sheet keeps its width at 1280 (${resilient.sheet} vs ${sheetW})`)
  assert.ok(resilient.pages && resilient.comments, 'Pages survives at 1280 by bringing comments inward')
  assert.ok(!resilient.pageArrow, 'no Pages arrow while the overlapped three-column layout fits')
  assert.ok(resilient.appliedOverlap > 0, 'overlap appears only when the full-width columns run short')
  assert.ok(resilient.textRight - resilient.commentsLeft >= 18 && resilient.textRight - resilient.commentsLeft <= 30,
    `the maximum overlap touches only a little text (${resilient.textRight - resilient.commentsLeft}px)`)

  // Below that, Pages is still the first column to yield.
  const mid = await resizeTo(1240)
  assert.ok(!mid.pages, 'the Pages sidebar folds away first')
  assert.ok(mid.pageArrow, 'the Pages arrow appears only after the sidebar auto-collapses')
  assert.ok(mid.comments, 'the comments margin is still there when only the sidebar had to go')
  assert.equal(mid.appliedOverlap, 0, 'comments stop overlapping as soon as Pages collapses')
  assert.ok(mid.commentsLeft >= mid.sheetRight, 'comments return outside the page after Pages collapses')

  // narrower still: the comments follow, and the page is STILL the same width
  const tight = await resizeTo(1000)
  assert.strictEqual(tight.sheet, sheetW, `the sheet keeps its width at 1000 (${tight.sheet} vs ${sheetW})`)
  assert.ok(!tight.pages && !tight.comments, 'both columns fold before the page is touched')

  // growing back restores them, in reverse
  const back = await resizeTo(1440)
  assert.ok(back.pages && back.comments, 'panels come back when the room does')
  assert.ok(!back.pageArrow, 'the Pages arrow disappears when the sidebar returns')

  // zoom magnifies the page itself: sheet and type take the same factor
  await page.click('#zoom-in')
  await page.click('#zoom-in')
  await page.waitForTimeout(250)
  const zoomed = await geom()
  const sheetRatio = zoomed.sheet / wide.sheet
  const fontRatio = zoomed.font / wide.font
  assert.ok(zoomed.sheet > wide.sheet, `zoom widens the sheet (${wide.sheet} -> ${zoomed.sheet})`)
  assert.ok(
    Math.abs(sheetRatio - fontRatio) < 0.02,
    `sheet and type scale together (sheet x${sheetRatio.toFixed(3)}, type x${fontRatio.toFixed(3)})`
  )

  // a page too wide for the window scrolls sideways INSIDE its column — the
  // window itself must never gain a horizontal scrollbar (that unsticks the header)
  const overflowing = await resizeTo(1000)
  assert.ok(overflowing.colScroll > 0, 'an over-wide page scrolls inside the editor column')
  assert.ok(overflowing.bodyOverflow <= 0, `the window itself does not scroll sideways (${overflowing.bodyOverflow}px)`)

  await page.click('#zoom-out')
  await page.click('#zoom-out')
  await resizeTo(1440)
  console.log('✓ fixed-width page: folds the side panels, zooms whole, scrolls in place')

  // --- the same document at every width: reflow only as late as it must ---
  // The document used to keep its page geometry at every width, on the grounds
  // that reflowing it moved the line breaks. It did — and it also made a 390px
  // phone show 68% of each line off-screen with no zoom that both fitted the
  // page and left legible type. So the sheet now goes fluid below 840px, in two
  // stages, and this walks the stages:
  //   >840  nothing changes at all — the page fits, so it stays a page
  //   ≤840  the sheet is fluid but the text column is still capped at the page's
  //         own 624px, so the SAME words break on the SAME lines with no scroll
  //   ≤700  a handset cannot hold 624px, so the measure and the type both give
  const shape = () =>
    page.evaluate(() => {
      const t = document.querySelector('.tiptap')
      const para = [...t.querySelectorAll('p')].find(e => e.textContent.trim().length > 60)
      const col = document.getElementById('editor-col')
      return {
        sheet: Math.round(document.getElementById('editor').getBoundingClientRect().width),
        measure: Math.round(t.getBoundingClientRect().width),
        padLeft: Math.round(parseFloat(getComputedStyle(document.getElementById('editor')).paddingLeft)),
        font: getComputedStyle(t).fontSize,
        // a dragged table carries inline geometry that ignores the measure
        table: Math.round(document.querySelector('.tiptap table')?.getBoundingClientRect().width || 0),
        // if the lines broke differently, the paragraph and the document change height
        paraHeight: para ? Math.round(para.getBoundingClientRect().height) : 0,
        docHeight: Math.round(t.getBoundingClientRect().height),
        colScroll: col.scrollWidth - col.clientWidth,
        colWidth: col.clientWidth,
        windowOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
      }
    })

  // A resize lands in the renderer asynchronously and the header's own
  // ResizeObserver can move --hdr-h a frame later, so a fixed sleep is a
  // coin toss at these boundaries: read the shape until two reads agree.
  const shapeAfterResize = async (width, height) => {
    await page.setViewportSize({ width, height })
    let prev = null
    for (let i = 0; i < 25; i++) {
      await page.waitForTimeout(100)
      const now = await shape()
      if (prev && now.sheet === prev.sheet && now.measure === prev.measure && now.docHeight === prev.docHeight) return now
      prev = now
    }
    return prev
  }

  // Put a table with a DRAGGED column in the document first. A pristine table is
  // width:100% and divides the measure, so it can never fail the no-scroll checks
  // below — the assertions were sound but pointed at content that could not fail
  // them. prosemirror-tables records a drag as an inline min-width on the table
  // and an inline width on a <col>, and that is what follows the reader onto a
  // phone and puts the sideways pan back. Reviewed and reproduced: 562px of table
  // inside a 354px measure, 190px of scroll on #editor-col.
  await page.click('.tiptap p')
  await page.keyboard.press('End')
  await page.click('button[title="Insert table"]')
  await page.waitForSelector('.tiptap table th')
  await page.waitForTimeout(400)
  const tblBorder = await page.evaluate(() => {
    const c = document.querySelector('.tiptap table:first-of-type tr:first-child > *')
    const r = c.getBoundingClientRect()
    return { x: r.right, y: r.top + r.height / 2 }
  })
  await page.mouse.move(tblBorder.x - 1, tblBorder.y)
  await page.waitForSelector('.tiptap .column-resize-handle')
  await page.mouse.down()
  await page.mouse.move(tblBorder.x + 200, tblBorder.y, { steps: 10 })
  await page.mouse.up()
  await waitFor(
    async () => await page.evaluate(() => /min-width/.test(document.querySelector('.tiptap table').getAttribute('style') || '')),
    'the drag writes an inline min-width onto the table (the thing that overflows)'
  )
  await page.waitForTimeout(400)

  const onDesktop = await shapeAfterResize(1440, 900)
  assert.ok(onDesktop.table > 0, 'the resized table is in the document under test')

  // above the reflow width the page is untouched, down to the pixel
  for (const width of [1100, 900, 860]) {
    const wideEnough = await shapeAfterResize(width, 844)
    assert.strictEqual(wideEnough.sheet, onDesktop.sheet, `at ${width}px the page keeps its width`)
    assert.strictEqual(wideEnough.measure, onDesktop.measure, `at ${width}px the text column is unchanged`)
    assert.strictEqual(wideEnough.font, onDesktop.font, `at ${width}px the document is set at the same size`)
    assert.strictEqual(wideEnough.paraHeight, onDesktop.paraHeight, `at ${width}px the lines break identically`)
    assert.strictEqual(wideEnough.docHeight, onDesktop.docHeight, `at ${width}px nothing above or below moved`)
    assert.strictEqual(wideEnough.colScroll, 0, `at ${width}px the page fits, so nothing scrolls sideways`)
  }

  // 701-840: the sheet gives up being a page, and NOTHING else gives. This is
  // the assertion that keeps the reflow honest — a tablet is not allowed to
  // re-break a single line just because the canvas around the page went away.
  for (const width of [840, 768, 720]) {
    const fluid = await shapeAfterResize(width, 1024)
    assert.equal(fluid.sheet, fluid.colWidth, `at ${width}px the sheet is fluid, not a page (${JSON.stringify(fluid)})`)
    assert.ok(fluid.sheet <= width, `at ${width}px the sheet fits the window (${fluid.sheet})`)
    assert.strictEqual(fluid.measure, onDesktop.measure,
      `at ${width}px the text column is still the page's 624px (${fluid.measure})`)
    assert.strictEqual(fluid.font, onDesktop.font, `at ${width}px the type is untouched`)
    assert.strictEqual(fluid.paraHeight, onDesktop.paraHeight, `at ${width}px the lines break identically`)
    assert.strictEqual(fluid.colScroll, 0, `at ${width}px there is nothing left to scroll to (${fluid.colScroll})`)
    assert.ok(fluid.windowOverflow <= 0, `at ${width}px the window does not scroll sideways`)
    assert.ok(fluid.table <= fluid.measure + 1,
      `at ${width}px the dragged table is inside the measure (${fluid.table} in ${fluid.measure})`)
  }

  // ≤700: a handset. Now the measure and the type both move — the point of the
  // whole change — and the one thing that must not move is the fit.
  const desktopFont = parseFloat(onDesktop.font)
  for (const width of [700, 390, 360, 320]) {
    const phone = await shapeAfterResize(width, 844)
    assert.strictEqual(phone.sheet, phone.colWidth, `at ${width}px the sheet is exactly the column (${phone.sheet})`)
    assert.ok(phone.measure <= width - 32, `at ${width}px the text column fits with margins (${phone.measure})`)
    assert.strictEqual(phone.colScroll, 0, `at ${width}px nothing scrolls sideways (${phone.colScroll})`)
    // the inline geometry from a column drag is the one thing that reaches this
    // far and ignores the measure entirely
    assert.ok(phone.table <= phone.measure + 1,
      `at ${width}px the dragged table is inside the measure (${phone.table} in ${phone.measure})`)
    assert.ok(phone.windowOverflow <= 0, `at ${width}px the window does not scroll sideways`)
    // the legibility floor: 16px is what iOS and Android set body text at, and
    // what the old "use zoom to fit it" answer arrived at 7px of
    assert.ok(parseFloat(phone.font) >= 16, `at ${width}px body text is at least 16px (${phone.font})`)
    assert.ok(parseFloat(phone.font) > desktopFont,
      `at ${width}px the type is larger than the page's 11pt, not smaller (${phone.font})`)
    // margins are a proportion of a small screen now, not a printed inch
    assert.ok(phone.padLeft >= 16 && phone.padLeft <= width * 0.09,
      `at ${width}px the page margin is 16px-9% of the screen, not 24.6% (${phone.padLeft})`)
  }

  // and back: the page returns exactly as it was, so this is a view of the
  // document and not an edit to it
  // named for this block specifically: #14 (agent/reader-text-size) declares its
  // own `restored` in this same function scope, and git merges the two files
  // without a conflict into something Node then refuses to parse
  const restoredPage = await shapeAfterResize(1440, 900)
  assert.deepStrictEqual(
    [restoredPage.sheet, restoredPage.measure, restoredPage.font, restoredPage.paraHeight, restoredPage.docHeight],
    [onDesktop.sheet, onDesktop.measure, onDesktop.font, onDesktop.paraHeight, onDesktop.docHeight],
    'the page comes back identical after a round trip through phone widths'
  )
  // A rotation is how a handset crosses 840, and the zoom floor is different
  // either side of it. Read at apply time only, a 40% zoom set while the sheet
  // was a page stayed 40% after the rotation — 6.4px of body text, held until
  // the next reload.
  await shapeAfterResize(1000, 900)
  for (let i = 0; i < 8; i++) await page.click('#zoom-out')
  await page.waitForTimeout(300)
  assert.equal(await page.textContent('#zoom-label'), '40%', 'a fixed-width page still zooms to 40%')
  await shapeAfterResize(390, 844)
  const afterRotate = await page.evaluate(() => ({
    zoom: getComputedStyle(document.documentElement).getPropertyValue('--doc-zoom').trim(),
    font: parseFloat(getComputedStyle(document.querySelector('.tiptap')).fontSize),
  }))
  assert.equal(afterRotate.zoom, '0.8', `rotating into the fluid column re-clamps the floor (${afterRotate.zoom})`)
  assert.ok(afterRotate.font >= 12, `and the type is readable rather than 6.4px (${afterRotate.font}px)`)
  // back to a width where the zoom buttons are in the toolbar rather than folded
  // into the ⋯ sheet, then put the setting back for the checks that follow
  await shapeAfterResize(1440, 900)
  for (let i = 0; i < 12 && (await page.textContent('#zoom-label')) !== '100%'; i++) await page.click('#zoom-in')
  await page.waitForTimeout(300)
  assert.equal(await page.textContent('#zoom-label'), '100%', 'zoom restored to 100%')
  console.log('✓ rotating across 840 re-clamps the zoom floor (40% -> 80%, not 6.4px type)')

  console.log('✓ reflow arrives in two stages: geometry at 840, type at 700, nothing above')

  // --- document style: Docs (Arial 11pt/1.15) <-> Reading (serif 22px/1.45) ---
  const typeset = () =>
    page.evaluate(() => {
      const t = getComputedStyle(document.querySelector('.tiptap'))
      const p = [...document.querySelectorAll('.tiptap p')].find(e => e.textContent.trim().length > 40)
      return {
        style: document.documentElement.dataset.docStyle,
        family: t.fontFamily.split(',')[0].replace(/"/g, ''),
        size: parseFloat(t.fontSize),
        line: parseFloat(t.lineHeight),
        paraGap: p ? parseFloat(getComputedStyle(p).marginBottom) : null,
        measure: Math.round(document.querySelector('.tiptap').getBoundingClientRect().width),
      }
    })

  const docsSet = await typeset()
  assert.strictEqual(docsSet.style, 'docs', 'default document style is docs')
  assert.strictEqual(docsSet.family, 'Arial', 'docs style sets the document in Arial')
  assert.strictEqual(docsSet.paraGap, 0, 'docs style has no space between paragraphs')

  await page.click('#docstyle-btn')
  await waitFor(async () => (await typeset()).family === 'Libre Baskerville', 'reading style swaps in the serif')
  const readingSet = await typeset()
  // The settled numbers, pinned: 16px on 28.8px with 17.6px between paragraphs.
  // Chosen by eye against real text rather than derived, which is exactly why
  // they are worth pinning — nothing else records why these and not others.
  assert.strictEqual(readingSet.size, 16, `body is set at 16px (got ${readingSet.size})`)
  assert.strictEqual(Math.round(readingSet.line * 10) / 10, 28.8, `leading is 28.8px (got ${readingSet.line})`)
  assert.strictEqual(Math.round(readingSet.paraGap * 10) / 10, 17.6, `paragraph gap is 17.6px (got ${readingSet.paraGap})`)
  const head = await page.evaluate(() => {
    const h = document.querySelector('.tiptap h2')
    if (!h) return null
    const s = getComputedStyle(h)
    return { size: parseFloat(s.fontSize), line: parseFloat(s.lineHeight), caps: s.fontVariantCaps,
             ls: parseFloat(s.letterSpacing), mt: parseFloat(s.marginTop) }
  })
  if (head) {
    assert.strictEqual(Math.round(head.size * 10) / 10, 25.6, `section heads are 25.6px (got ${head.size})`)
    assert.strictEqual(head.caps, 'all-small-caps', 'section heads are small caps')
    assert.ok(Math.abs(head.ls / head.size - 0.075) < 0.005, `section heads keep the article's 0.075em tracking (got ${(head.ls / head.size).toFixed(4)}em)`)
    assert.ok(Math.abs(head.mt / head.size - 2) < 0.02, `section heads take 2em of air above (got ${(head.mt / head.size).toFixed(2)}em)`)
  }
  // the switch is typography only — the sheet keeps Docs' letter geometry
  assert.strictEqual(readingSet.measure, docsSet.measure, 'the text column is untouched by the document style')
  // (no words-per-line guard against Docs: this face at this size fits 10.69
  // to Docs' 13.54, so the two deliberately differ and switching reflows)
  // and it survives a reload, like the theme
  await page.reload({ waitUntil: 'domcontentloaded' })
  await waitFor(async () => !!(await page.$('.tiptap p')), 'doc reloads')
  assert.strictEqual((await typeset()).family, 'Libre Baskerville', 'document style persists across a reload')
  await page.click('#docstyle-btn')
  await waitFor(async () => (await typeset()).family === 'Arial', 'switches back to docs')
  console.log('✓ document style switch (Docs <-> Reading), persisted, page width untouched')

  // --- reader text size: the half of the pair that DOES reflow ---
  // Zoom above is guarded on "the sheet and the type take the same factor, so
  // the lines never move". This is the exact complement and needs its own guard,
  // because the failure mode is the two controls quietly becoming one: a text
  // size that also widened the page would leave the words-per-line alone, which
  // is the one thing a reader reaches for it to change.
  //
  // The document this suite has built up by now is all short lines, and a line
  // that never wrapped cannot re-break — so the measurement needs a paragraph
  // long enough to wrap. It is appended here and taken out again at the end of
  // the block, with the document's text asserted back to what it was.
  const LONG =
    'A reader who asks for larger type is not asking for a larger page: the sheet should ' +
    'stay exactly where it is on the screen while the words inside it find new lines, ' +
    'which is the one thing zoom can never do and the whole reason this control exists ' +
    'next to it.'
  const beforeText = await page.textContent('.tiptap')
  const anchor = await page.evaluate(text => {
    const e = window.__editor
    const at = e.state.doc.content.size
    e.chain().focus().insertContentAt(at, { type: 'paragraph', content: [{ type: 'text', text }] }).run()
    return at
  }, LONG)
  await page.waitForTimeout(300)

  const sized = () =>
    page.evaluate(marker => {
      const t = document.querySelector('.tiptap')
      const p = [...t.querySelectorAll('p')].find(e => e.textContent.startsWith(marker))
      const lh = p ? parseFloat(getComputedStyle(p).lineHeight) : 1
      return {
        scale: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--doc-text-scale')),
        stored: localStorage.getItem('doc-text-scale'),
        label: document.getElementById('docsize-label').textContent,
        size: parseFloat(getComputedStyle(t).fontSize),
        sheet: Math.round(document.getElementById('editor').getBoundingClientRect().width),
        measure: Math.round(t.getBoundingClientRect().width),
        lines: p ? Math.round(p.getBoundingClientRect().height / lh) : 0,
      }
    }, LONG.slice(0, 30))

  const base = await sized()
  assert.strictEqual(base.scale, 1, 'text size starts at 1x')
  assert.ok(base.lines >= 3, `the measured paragraph wraps to begin with (${base.lines} lines)`)
  assert.strictEqual(base.label, '15px', `the readout is the document's own size, in px (got ${base.label})`)

  for (let i = 0; i < 3; i++) await page.click('#text-larger')
  await page.waitForTimeout(250)
  const bigger = await sized()
  assert.ok(Math.abs(bigger.size / base.size - 1.3) < 0.01,
    `three steps up is 1.3x the type (${base.size} -> ${bigger.size})`)
  assert.strictEqual(bigger.sheet, base.sheet, `the page keeps its width (${base.sheet} -> ${bigger.sheet})`)
  assert.strictEqual(bigger.measure, base.measure, `and so does the text column (${base.measure} -> ${bigger.measure})`)
  assert.ok(bigger.lines > base.lines, `so the paragraph re-breaks onto more lines (${base.lines} -> ${bigger.lines})`)
  assert.strictEqual(bigger.label, '19px', `the readout follows (got ${bigger.label})`)
  assert.strictEqual(bigger.stored, '1.3', 'the choice is stored')

  // it is a factor, not a size: a style switch changes what 100% means and the
  // reader's own step up rides along on top of whatever the style asked for
  await page.click('#docstyle-btn')
  await waitFor(async () => (await typeset()).family === 'Libre Baskerville', 'reading style swaps in the serif')
  await page.waitForTimeout(250)
  const readingBig = await sized()
  assert.strictEqual(readingBig.scale, 1.3, 'the reader\'s step up survives a document style switch')
  assert.ok(Math.abs(readingBig.size - 16 * 1.3) < 0.05,
    `Reading's own 16px takes the same 1.3x (got ${readingBig.size})`)
  assert.strictEqual(readingBig.label, '21px', `the px readout re-reads the new style's base (got ${readingBig.label})`)
  assert.strictEqual(readingBig.sheet, base.sheet, 'the page is still the same width in the other style')
  await page.click('#docstyle-btn')
  await waitFor(async () => (await typeset()).family === 'Arial', 'switches back to docs')
  await page.waitForTimeout(250)

  // …and it survives a reload, like zoom and the style itself
  await page.reload({ waitUntil: 'domcontentloaded' })
  await waitFor(async () => !!(await page.$('.tiptap p')), 'doc reloads')
  await page.waitForTimeout(400)
  const reloaded = await sized()
  assert.strictEqual(reloaded.scale, 1.3, 'text size persists across a reload')
  assert.strictEqual(reloaded.label, '19px', 'and so does the readout')

  // the two knobs do not touch: zoom on top of a text size still freezes the
  // line breaks it was given and magnifies the page whole
  await page.click('#zoom-in')
  await page.click('#zoom-in')
  await page.waitForTimeout(250)
  const zoomedToo = await sized()
  assert.ok(zoomedToo.sheet > reloaded.sheet, `zoom still widens the page (${reloaded.sheet} -> ${zoomedToo.sheet})`)
  assert.strictEqual(zoomedToo.lines, reloaded.lines, 'zoom on top of a text size does not re-break the lines')
  assert.strictEqual(zoomedToo.scale, 1.3, 'and does not disturb the text size')
  await page.click('#zoom-out')
  await page.click('#zoom-out')
  await page.waitForTimeout(250)

  for (let i = 0; i < 3; i++) await page.click('#text-smaller')
  await page.waitForTimeout(250)
  const restored = await sized()
  assert.strictEqual(restored.scale, 1, 'three steps back down returns to 1x')
  assert.strictEqual(restored.size, base.size, `and to the size it started at (${restored.size})`)
  await page.evaluate(from => {
    const e = window.__editor
    e.chain().focus().deleteRange({ from, to: e.state.doc.content.size }).run()
  }, anchor)
  await page.waitForTimeout(300)
  assert.strictEqual(await page.textContent('.tiptap'), beforeText,
    'the measuring paragraph is taken back out, leaving the document as it was')
  console.log('✓ reader text size: page width holds, lines re-break, rides on top of the style, persists')

  // --- the toolbar always fits its row ---
  // Added because it did not. #header-tools scrolls with its scrollbar hidden
  // (app.css: scrollbar-width: none), so a toolbar too wide for its track does
  // not announce itself — it just ends, and the buttons past the edge are gone
  // with nothing on screen saying they exist. Adding the text-size pair took the
  // toolbar from 721px to 818px and pushed the image button off a 1280px window.
  //
  // The width the toolbar needs is not a function of the window width, which is
  // the whole reason this is measured rather than fixed at a breakpoint: the
  // title is up to 260px of the row (#doc-title max-width) and a full-length one
  // moves the point where it stops fitting by ~180px. So the sweep runs at both
  // title lengths, and asserts the header grew a row instead of clipping.
  const fits = () =>
    page.evaluate(() => {
      const bar = document.getElementById('header-tools')
      const track = bar.getBoundingClientRect()
      const within = id => {
        const e = document.getElementById(id)
        if (!e) return null
        const b = e.getBoundingClientRect()
        return b.width > 0 && b.left >= track.left - 1 && b.right <= track.right + 1
      }
      return {
        clipped: Math.max(0, bar.scrollWidth - bar.clientWidth),
        ownRow: document.body.classList.contains('tools-own-row'),
        image: within('image-btn'),
        smaller: within('text-smaller'),
        larger: within('text-larger'),
        label: document.getElementById('docsize-label')?.textContent,
      }
    })
  const LONG_TITLE = 'Quarterly Planning and Roadmap Review Document 2026'
  const shortTitle = await page.textContent('#doc-title')
  for (const title of [shortTitle, LONG_TITLE]) {
    // the title is layout here, not content — set it directly rather than
    // renaming the document out from under every later test
    await page.evaluate(t => { document.getElementById('doc-title').textContent = t }, title)
    for (const width of [1600, 1440, 1366, 1280, 1200, 1100, 1024]) {
      await page.setViewportSize({ width, height: 800 })
      await page.waitForTimeout(200)
      const f = await fits()
      const at = `${width}px, title "${title.slice(0, 18)}"`
      assert.strictEqual(f.clipped, 0, `the toolbar is not cut off at ${at} (${f.clipped}px lost)`)
      assert.ok(f.image, `the image button is reachable at ${at}`)
      assert.ok(f.smaller && f.larger, `both text-size buttons are reachable at ${at}`)
      assert.ok(/^\d+px$/.test(f.label), `the readout is whole, not truncated, at ${at} (got "${f.label}")`)
    }
  }
  // and the way it wins is by taking a row, not by shrinking anything
  await page.setViewportSize({ width: 1280, height: 800 })
  await page.waitForTimeout(250)
  const narrowFit = await fits()
  assert.ok(narrowFit.ownRow, 'at 1280 with a long title the toolbar takes a row of its own')
  const headerGrew = await page.evaluate(() => ({
    topbar: Math.round(document.getElementById('topbar').getBoundingClientRect().height),
    hdrVar: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hdr-h')),
  }))
  assert.ok(headerGrew.topbar > 52, `the header grew a row rather than clipping (${headerGrew.topbar}px)`)
  assert.ok(Math.abs(headerGrew.hdrVar - headerGrew.topbar) <= 1,
    `--hdr-h follows it, so the drawer and popovers stay under the header (${headerGrew.hdrVar} vs ${headerGrew.topbar})`)
  // a wide window puts it back on one row
  await page.evaluate(t => { document.getElementById('doc-title').textContent = t }, shortTitle)
  await page.setViewportSize({ width: 1440, height: 900 })
  await page.waitForTimeout(250)
  const roomy = await fits()
  assert.ok(!roomy.ownRow, 'and gives the row back when the window can hold it')
  assert.strictEqual(roomy.clipped, 0, 'still nothing clipped at 1440')
  console.log('✓ the toolbar fits its row at every desktop width, or takes a row of its own')

  // --- undo / redo ---
  await focusDocEnd(page)
  await page.waitForTimeout(600)
  await page.keyboard.type(' UNDOME')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('UNDOME'), 'typed marker')
  await page.click('#undo-btn')
  await waitFor(async () => !(await page.textContent('.tiptap')).includes('UNDOME'), 'undo removes marker')
  await page.click('#redo-btn')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('UNDOME'), 'redo restores marker')
  await page.click('#undo-btn')
  console.log('✓ undo / redo buttons')

  await page.screenshot({ path: `${SHOT}/redesign-doc.png`, fullPage: false })

  // "- [ ] " markdown shortcut converts to a real task list (done last so it
  // doesn't perturb the earlier suggestion tests on this doc)
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('- [ ] shortcut task')
  await waitFor(async () => !!(await page.$('.tiptap ul[data-type="taskList"] input')), '"- [ ] " creates a task list')
  assert.ok(!(await page.textContent('.tiptap')).includes('[ ] shortcut'), 'no literal bracket text left')
  console.log('✓ "- [ ] " shortcut makes a task list')

  // live HTML embed: insert via toolbar, render in a sandboxed iframe, persist
  await page.click('button[title="Embed live HTML (sandboxed)"]')
  await waitFor(async () => !!(await page.$('.embed-overlay-ta')), 'embed overlay opens')
  await page.fill('.embed-overlay-ta', '<div id="embed-probe" style="height:220px">hello <b>embed</b></div>')
  await page.click('.embed-overlay .btn.primary')
  await waitFor(async () => !!(await page.$('.tiptap iframe.html-embed')), 'embed iframe renders')
  const sandbox = await page.getAttribute('.tiptap iframe.html-embed', 'sandbox')
  assert.ok(/\ballow-scripts\b/.test(sandbox), 'iframe allows scripts')
  assert.ok(!/allow-same-origin/.test(sandbox), 'iframe is NOT same-origin (sandbox intact)')
  // content actually rendered inside the frame
  await waitFor(async () => {
    const fr = page.frames().find(f => f.parentFrame())
    try { return !!(fr && (await fr.$('#embed-probe'))) } catch { return false }
  }, 'embed content mounted inside frame')
  // iframe auto-sizes to content — no stray inner scrollbar (frame not scrollable)
  await waitFor(async () => {
    const fr = page.frames().find(f => f.parentFrame())
    try {
      const m = await fr.evaluate(() => ({ s: document.documentElement.scrollHeight, c: document.documentElement.clientHeight }))
      return m.c >= 200 && m.s <= m.c + 1
    } catch { return false }
  }, 'embed frame fits its content (no vertical scrollbar)')
  // survives a reload (round-trips through Yjs + markdown)
  await page.reload({ waitUntil: 'networkidle' })
  await waitFor(async () => !!(await page.$('.tiptap iframe.html-embed')), 'embed persists after reload')
  console.log('✓ sandboxed HTML embed renders + persists')

  // --- playground: sidebar, strips, chains, image bubble, reset ---
  await page.click('#docs-btn')
  await page.waitForSelector('#docs-pop:not(.hidden)')
  await page.click('#playground-btn')
  await page.waitForURL('**/d/**')
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.$$('.card')).length >= 8, 'playground cards render')
  await page.waitForTimeout(800)

  const treeLinks = await page.$$eval('#page-tree a', as => as.map(a => a.textContent))
  assert.ok(treeLinks.length >= 2, 'sidebar tree has pages: ' + JSON.stringify(treeLinks))
  console.log('✓ playground: sidebar tree')

  // --- REGRESSION: suggestions and comments must work on a SUBPAGE too ---
  // Anchors are relative positions into the page's OWN fragment. The client
  // resolved them against 'default' — the home page's fragment — so on every
  // other page a suggestion's range came back null: the card appeared in the
  // margin, the inline preview never did, and there was nothing to review.
  {
    const target = await page.$$eval('#page-tree a', as => {
      const link = as.find(a => /\/d\/[^/]+\/.+/.test(a.getAttribute('href') || ''))
      return link ? link.getAttribute('href') : null
    })
    assert.ok(target, 'playground has a subpage to open')
    await page.click(`#page-tree a[href="${target}"]`)
    await page.waitForURL(`**${target}`)
    await page.waitForSelector('.tiptap')
    await page.waitForTimeout(600)
    // baseline on THIS page: the home page has highlights of its own
    const before = (await page.$$('.tiptap .comment-hl')).length

    const posted = await page.evaluate(async () => {
      const [id, slug] = location.pathname.split('/d/')[1].split('/')
      const snap = await (await fetch(`/api/docs/${id}?page=${slug}`)).json()
      const idx = (snap.blocks || []).findIndex(b => !/^#/.test(b.markdown || '') && (b.markdown || '').split(/\s+/).length > 3)
      // keep the replacement CLOSE to the original: an unrelated rewrite renders
      // as an insertion panel by design, and it is the in-place word diff that
      // the anchor range is needed for
      const original = snap.blocks[idx].markdown
      const words = original.split(/\s+/)
      const swapped = words.map(w => (w === words[2] ? 'zwitschernd' : w)).join(' ')
      const sugg = await (
        await fetch(`/api/docs/${id}/suggestions`, {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ page: slug, block_index: idx, replacement_markdown: swapped, rationale: 'subpage preview check' }),
        })
      ).json()
      const loose = await (
        await fetch(`/api/docs/${id}/threads`, {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ page: slug, text: 'Page-level note: this belongs to the page, not to one sentence.' }),
        })
      ).json()
      return { slug, idx, sugg, loose, replaced: words[2] }
    })
    assert.ok(posted.idx >= 0 && posted.sugg.suggestion_id, 'suggestion posted on the subpage: ' + JSON.stringify(posted))
    await waitFor(
      async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-ins')].map(n => n.textContent).join(' '))).includes('zwitschernd'),
      'a subpage suggestion previews inline, not only as a card'
    )
    await waitFor(
      async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-del')].map(n => n.textContent).join(' '))).includes(posted.replaced),
      'the replaced word is struck through on a subpage'
    )

    // an unanchored comment: its own card, marked as page-level, marking no text
    assert.equal(posted.loose.anchored, false, 'thread posted without an anchor: ' + JSON.stringify(posted.loose))
    await waitFor(async () => (await page.$$('.card.thread')).length > 0, 'page-level comment gets a card')
    await page.click('.card.thread')
    await waitFor(async () => !!(await page.$('.card.thread.expanded .page-level')), 'page-level comment says it is about the page')
    assert.equal((await page.$$('.tiptap .comment-hl')).length, before, 'a page-level comment highlights no text')
    console.log('✓ subpages: suggestions preview inline, page-level comments show as their own card')

    // back to the playground home: everything below expects the seeded page
    await page.click(`#page-tree a[href$="/d/${target.split('/d/')[1].split('/')[0]}"]`)
    await page.waitForSelector('.tiptap')
    await waitFor(async () => !!(await page.$('.tiptap ul[data-type="taskList"] input')), 'back on the seeded home page')
  }

  // task lists + tables render natively in the seeded home page
  await waitFor(async () => !!(await page.$('.tiptap ul[data-type="taskList"] input')), 'task list renders with checkboxes')
  await waitFor(async () => !!(await page.$('.tiptap table th')), 'table renders with a header row')
  await waitFor(async () => !!(await page.$('.tiptap iframe.html-embed')), 'seeded HTML embed renders in the editor')
  console.log('✓ task lists + tables + HTML embed render in the editor')

  // --- table columns resize by dragging a cell border, and the width sticks ---
  const colWidths = () => page.evaluate(() =>
    [...document.querySelectorAll('.tiptap table:first-of-type tr:first-child > *')]
      .map(c => ({ px: Math.round(c.getBoundingClientRect().width), attr: c.getAttribute('colwidth') })))
  const tableWidth = () => page.evaluate(() =>
    Math.round(document.querySelector('.tiptap table:first-of-type').getBoundingClientRect().width))
  const startCols = await colWidths()
  const startTable = await tableWidth()
  assert.ok(startCols.length >= 2, 'seeded table has columns to resize')
  const border = await page.evaluate(() => {
    const c = document.querySelector('.tiptap table:first-of-type tr:first-child > *')
    const r = c.getBoundingClientRect()
    return { x: r.right, y: r.top + r.height / 2 }
  })
  await page.mouse.move(border.x - 1, border.y)
  await waitFor(async () => !!(await page.$('.tiptap .column-resize-handle')), 'resize handle appears on the border')
  assert.ok(await page.evaluate(() => document.querySelector('.tiptap').classList.contains('resize-cursor')),
    'the editor shows a col-resize cursor while the border is under the pointer')
  await page.mouse.down()
  await page.mouse.move(border.x - 90, border.y, { steps: 10 })
  await page.mouse.up()
  await waitFor(async () => (await colWidths())[0].attr !== null, 'drag writes a colwidth onto the column')
  const narrowedCols = await colWidths()
  assert.ok(narrowedCols[0].px < startCols[0].px - 40, `first column narrowed (${startCols[0].px} -> ${narrowedCols[0].px})`)
  // the last column is deliberately elastic, so the table itself must not grow
  assert.ok(Math.abs(await tableWidth() - startTable) <= 2,
    `table stays pinned to the page width (${startTable} -> ${await tableWidth()})`)
  // and the width is an edit like any other: it survives a reload through the doc
  await page.reload({ waitUntil: 'domcontentloaded' })
  await waitFor(async () => !!(await page.$('.tiptap table')), 'doc reloads with the table')
  await waitFor(async () => (await colWidths())[0].attr !== null, 'column width persisted across the reload')
  const colsAfterReload = await colWidths()
  assert.strictEqual(colsAfterReload[0].attr, narrowedCols[0].attr,
    `same colwidth after reload (${narrowedCols[0].attr} vs ${colsAfterReload[0].attr})`)
  console.log('✓ table columns resize by drag, table width pinned, widths persist')

  // --- the switcher is the whole of navigation now: list, switch, and / resolves ---
  const firstDocUrl = page.url()
  await page.click('#docs-btn')
  await page.waitForSelector('#docs-pop:not(.hidden)')
  await waitFor(async () => (await page.$$('#docs-pop .doc-row')).length >= 2, 'switcher lists the documents')
  const rows = await page.$$eval('#docs-pop .doc-row', rs => rs.map(r => ({
    title: r.querySelector('.title')?.textContent, current: r.classList.contains('current') })))
  assert.strictEqual(rows.filter(r => r.current).length, 1, 'exactly one row is marked as the one you are in: ' + JSON.stringify(rows))
  // switching is a navigation, so the URL is the document — a link worth sharing
  const other = rows.find(r => !r.current)
  await page.click(`#docs-pop .doc-row:not(.current) .doc-row-main`)
  await page.waitForURL(u => u.toString() !== firstDocUrl, { timeout: 15000 })
  await page.waitForSelector('.tiptap', { timeout: 20000 })
  await waitFor(async () => (await page.textContent('#doc-title')).trim() === other.title,
    `header shows the document switched to (${other.title})`)
  assert.ok(await page.isHidden('#docs-pop'), 'the switcher closes behind the navigation')
  console.log('✓ switcher lists documents, marks the current one, switches by navigation')

  // / is no longer a page of its own: it resolves to the most recent document
  const landed = await page.goto(`${BASE}/`, { waitUntil: 'domcontentloaded' })
  assert.ok(/\/d\//.test(page.url()), 'a signed-in visitor at / lands in a document: ' + page.url())
  assert.strictEqual(landed.request().redirectedFrom() ? 302 : landed.status(), landed.request().redirectedFrom() ? 302 : 200)
  await page.waitForSelector('.tiptap', { timeout: 20000 })
  console.log('✓ / resolves to the most recent document, no index page')

  // new-page suggestion: the seeded proposal shows as pending; preview + accept creates it
  await page.evaluate(() => { window.__projectCollabProbe = { provider: window.__provider, ydoc: window.__ydoc } })
  await waitFor(async () => !!(await page.$('#page-tree a.pending-page')), 'proposed page shows in sidebar')
  await page.click('#page-tree a.pending-page')
  await page.waitForSelector('#proposal-view:not(.hidden)')
  await waitFor(async () => !!(await page.$('#proposal-view table')), 'proposal preview renders content')
  await page.click('#proposal-view .proposal-actions .primary')
  await waitFor(async () => (await page.$$eval('#page-tree a', as => as.map(a => a.textContent))).some(t => t.includes('Proposed Page') && !t.includes('proposed')), 'accepted page joins the tree')
  await waitFor(async () => !(await page.$('#page-tree a.pending-page')), 'no longer pending after accept')
  assert.ok(await page.evaluate(() => window.__provider === window.__projectCollabProbe.provider && window.__ydoc === window.__projectCollabProbe.ydoc),
    'opening a page keeps the project collaboration connection')
  console.log('✓ new-page suggestion: pending → preview → accept creates the page')

  // --- a proposed page shows where it would land ---
  // Proposals used to be listed under a "proposed" heading below everything, so
  // an agent's placement was invisible until someone accepted it. They are drawn
  // in the tree at their {parent, index} instead.
  const placed = await page.evaluate(async () => {
    const id = location.pathname.split('/')[2]
    const post = (u, b) => fetch(u, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(b) }).then(r => r.json())
    await post(`/api/docs/${id}/structure/groups`, { label: 'Handbook' })
    await post(`/api/docs/${id}/page-suggestions`, { title: 'Filed Proposal', content_markdown: '# Filed\n\nbody', parent: ['"Handbook"'], index: 0 })
    return id
  })
  await page.reload({ waitUntil: 'domcontentloaded' }) // the sidebar polls every 15s; a reload is deterministic
  await page.waitForSelector('#page-tree a', { timeout: 20000 })
  await page.waitForFunction(() => !!window.__provider, { timeout: 20000 })
  // the reload replaced the provider this run compares against later
  await page.evaluate(() => { window.__projectCollabProbe = { provider: window.__provider, ydoc: window.__ydoc } })
  await waitFor(async () => (await page.$$eval('#page-tree .proposal-row a', as => as.map(a => a.textContent))).some(t => t.includes('Filed Proposal')), 'the proposal appears in the tree')
  const proposalShape = await page.evaluate(() => {
    const rows = [...document.querySelectorAll('#page-tree .tree-row')]
    const groupIdx = rows.findIndex(r => r.querySelector('.group-label')?.textContent.trim() === 'Handbook')
    const propIdx = rows.findIndex(r => r.classList.contains('proposal-row') && r.textContent.includes('Filed Proposal'))
    return {
      rightAfterItsGroup: propIdx === groupIdx + 1,
      indentedDeeper: rows[propIdx].getBoundingClientRect().left > rows[groupIdx].getBoundingClientRect().left,
      sectionHeadings: [...document.querySelectorAll('#page-tree .unfiled-label')].map(n => n.textContent.trim()),
      stillClickable: !!rows[propIdx].querySelector('a.pending-page'),
    }
  })
  assert.ok(proposalShape.rightAfterItsGroup, 'the proposal sits directly under the group it was proposed for: ' + JSON.stringify(proposalShape))
  assert.ok(proposalShape.indentedDeeper, 'and is indented as that group\'s child')
  assert.ok(!proposalShape.sectionHeadings.includes('proposed'), 'no separate "proposed" section remains: ' + JSON.stringify(proposalShape.sectionHeadings))
  assert.ok(proposalShape.stillClickable, 'and it still opens its preview')
  console.log('✓ proposed pages render in place in the tree, not in a list below it')

  // --- the open page is marked by its highlight alone ---
  const currentRow = await page.evaluate(() => {
    const row = document.querySelector('#page-tree .page-row:has(a.current)')
    if (!row) return null
    const cs = getComputedStyle(row)
    const alpha = c => Number((c.match(/[\d.]+\)$/) || ['1)'])[0].slice(0, -1))
    return {
      leftRuleVisible: cs.borderLeftStyle !== 'none' && parseFloat(cs.borderLeftWidth) > 0 && alpha(cs.borderLeftColor) > 0,
      hasTint: cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent',
    }
  })
  assert.ok(currentRow, 'the current page has a row in the tree')
  assert.ok(!currentRow.leftRuleVisible, 'no accent rule down the left of the current row: ' + JSON.stringify(currentRow))
  assert.ok(currentRow.hasTint, 'the highlight still marks it: ' + JSON.stringify(currentRow))
  console.log('✓ current page: highlight only, no left accent rule')

  // --- download: page vs project, markdown vs pdf ---
  await page.click('#download-btn')
  await page.waitForSelector('#download-pop:not(.hidden)')
  const dlPanel = await page.evaluate(() => ({
    scope: [...document.querySelectorAll('#dl-scope .dl-opt')].map(b => ({ label: b.textContent, on: b.classList.contains('on') })),
    format: [...document.querySelectorAll('#dl-format .dl-opt')].map(b => ({ label: b.textContent, on: b.classList.contains('on') })),
    action: document.getElementById('dl-go').textContent,
  }))
  assert.deepEqual(dlPanel.scope.map(o => o.label), ['This page', 'Whole project'], 'scope choices: ' + JSON.stringify(dlPanel))
  assert.deepEqual(dlPanel.format.map(o => o.label), ['Markdown', 'PDF'], 'format choices: ' + JSON.stringify(dlPanel))
  assert.ok(dlPanel.scope[0].on && dlPanel.format[0].on, 'defaults to this page as markdown: ' + JSON.stringify(dlPanel))

  // markdown, this page: a real download with the server's filename
  const [pageZip] = await Promise.all([page.waitForEvent('download'), page.click('#dl-go')])
  assert.match(pageZip.suggestedFilename(), /\.zip$/, 'page download is a zip: ' + pageZip.suggestedFilename())
  // markdown, whole project
  await page.click('#download-btn')
  await page.click('#dl-scope .dl-opt:nth-child(2)')
  const [projZip] = await Promise.all([page.waitForEvent('download'), page.click('#dl-go')])
  assert.match(projZip.suggestedFilename(), /-project\.zip$/, 'project download is named for the project: ' + projZip.suggestedFilename())

  // pdf: goes through the browser's print dialog, which the test must stand in for
  await page.evaluate(() => {
    window.__print = { calls: 0, seen: null }
    window.print = () => {
      window.__print.calls++
      window.__print.seen = {
        sheets: document.querySelectorAll('#print-view .print-page').length,
        printingClass: document.body.classList.contains('printing'),
        headings: [...document.querySelectorAll('#print-view h1, #print-view h2')].map(h => h.textContent.trim()).slice(0, 6),
        emptyMath: document.querySelectorAll('#print-view .math-view:empty').length,
      }
    }
  })
  await page.click('#download-btn')
  await page.click('#dl-format .dl-opt:nth-child(2)')
  assert.match(await page.textContent('#dl-go'), /print/i, 'the action says what will happen for PDF')
  await page.click('#dl-go')
  await page.waitForFunction(() => window.__print?.calls > 0, { timeout: 30000 })
  const printed = await page.evaluate(() => window.__print.seen)
  const pageCount = await page.evaluate(() => document.querySelectorAll('#page-tree .page-row:not(.proposal-row) a:not(.ghost-page)').length)
  assert.ok(printed.sheets > 1 && printed.sheets <= pageCount + 1, `every project page gets a sheet (${printed.sheets} sheets, ${pageCount} pages in the tree)`)
  assert.ok(printed.printingClass, 'the print-only body class is on while printing')
  assert.equal(printed.emptyMath, 0, 'formulas are typeset, not left as empty placeholders')

  // and on paper the app itself must not appear
  await page.emulateMedia({ media: 'print' })
  const onPaper = await page.evaluate(() => {
    const painted = id => { const n = document.getElementById(id); if (!n) return false; const r = n.getBoundingClientRect(); return r.width > 0 && r.height > 0 }
    return { topbar: painted('topbar'), sidebar: painted('sidebar'), editor: painted('editor'), printView: painted('print-view') }
  })
  await page.emulateMedia({ media: null })
  assert.ok(onPaper.printView, 'the print rendition is what gets printed: ' + JSON.stringify(onPaper))
  assert.ok(!onPaper.topbar && !onPaper.sidebar && !onPaper.editor, 'no app chrome on the page: ' + JSON.stringify(onPaper))

  // the print view is scaffolding: it must not outlive the dialog
  await page.evaluate(() => window.dispatchEvent(new Event('afterprint')))
  await waitFor(async () => page.evaluate(() => !document.getElementById('print-view') && !document.body.classList.contains('printing')), 'print view is torn down afterwards')
  console.log('✓ download: page/project × markdown/pdf, print shows the document alone')
  // --- the home star must not indent home's title ---
  // top-level real pages only: a nested page or a proposal is indented on purpose
  const titleXs = await page.evaluate(() =>
    [...document.querySelectorAll('#page-tree .page-row[data-depth="0"]:not(.proposal-row)')].map(r => ({
      title: r.querySelector('a')?.textContent.trim(),
      left: Math.round(r.querySelector('a')?.getBoundingClientRect().left),
      star: !!r.querySelector('.home-star'),
    }))
  )
  const starred = titleXs.find(t => t.star)
  assert.ok(starred, 'the front page still carries its star: ' + JSON.stringify(titleXs))
  // and it must not land on the caret when home has children of its own
  const starClash = await page.evaluate(() => {
    const row = document.querySelector('#page-tree .page-row:has(.home-star)')
    const star = row?.querySelector('.home-star')
    const caret = row?.querySelector('.tree-caret')
    if (!star || !caret) return { bothPresent: false }
    const l = n => n.getBoundingClientRect().left
    return { bothPresent: true, apart: Math.abs(l(star) - l(caret)) >= 12 }
  })
  if (starClash.bothPresent) assert.ok(starClash.apart, 'star and caret do not sit on top of each other: ' + JSON.stringify(starClash))
  const others = titleXs.filter(t => !t.star)
  assert.ok(others.length > 0, 'there are sibling pages to compare against: ' + JSON.stringify(titleXs))
  for (const other of others) {
    assert.strictEqual(starred.left, other.left, `"${starred.title}" starts where "${other.title}" does: ` + JSON.stringify(titleXs))
  }
  console.log('✓ the star sits in the gutter; every sidebar title starts at the same x')

  // return to the home page for the remaining playground sub-tests
  await page.evaluate(() => [...document.querySelectorAll('#page-tree a')].find(a => a.textContent.trim() === 'Playground')?.click())
  await waitFor(async () => (await page.$$('.card.suggestion')).length >= 1, 'back on home with suggestions')
  assert.ok(await page.evaluate(() => window.__provider === window.__projectCollabProbe.provider && window.__ydoc === window.__projectCollabProbe.ydoc),
    'returning home keeps the same project collaboration connection')
  console.log('✓ page switches reuse one synced project document')

  // --- search: page text, not just titles -------------------------------------
  // The sidebar box indexes every page of the project out of the one synced Yjs
  // document, so "suggestion" (which is in the prose, not in any title) has to
  // find home, list each occurrence with the heading it sits under, and mark
  // them in the open document.
  const playgroundHome = page.url()
  // hits under one page's row — by default the open one, whose marks we can also
  // count in the document; '*' for every page, since more than one of them
  // mentions "suggestion"
  const hitRows = (scope = 'li:has(> .page-row > a.current)') =>
    page.$$eval(`#page-tree ${scope} > .tree-hits .tree-hit:not(.more)`, rs => rs.map(r => ({
      heading: r.querySelector('.tree-hit-sec')?.textContent || '',
      snippet: r.querySelector('.tree-hit-text')?.textContent || '',
      href: r.getAttribute('href'),
    })))
  await page.fill('#sidebar-search', 'suggestion')
  await waitFor(async () => (await hitRows()).length > 0, 'typing text finds hits inside a page body')
  const suggestionHits = await hitRows()
  const marked = await page.$$eval('#editor mark.search-hl', ms => ms.map(m => m.textContent))
  assert.ok(marked.length >= 5, `every occurrence is marked in the document (${marked.length}): ` + JSON.stringify(marked))
  assert.ok(marked.every(t => t.toLowerCase() === 'suggestion'), 'marks cover the query and nothing else: ' + JSON.stringify(marked))
  // the pill is the page's TRUE count, which is more than the snippets listed
  const trueCount = Number(await page.$eval('#page-tree .page-row:has(a.current) .tree-hit-count', n => n.textContent))
  assert.strictEqual(trueCount, marked.length, `the count on the row is the real number of hits (${trueCount} vs ${marked.length} marks)`)
  assert.ok(suggestionHits.every(h => /suggestion/i.test(h.snippet)), 'each snippet quotes the match in context: ' + JSON.stringify(suggestionHits))
  assert.ok(suggestionHits.some(h => h.heading === 'Checklist') && suggestionHits.some(h => h.heading === 'Table'),
    'each hit is tagged with the heading it sits under: ' + JSON.stringify(suggestionHits.map(h => h.heading)))
  // hits are links: /d/<id>/<page>?q=<term>&n=<hit>, shareable and openable in a tab
  assert.match(suggestionHits[0].href, /\?q=suggestion$/, 'the first hit links to the plain query: ' + suggestionHits[0].href)
  assert.match(suggestionHits[1].href, /\?q=suggestion&n=1$/, 'later hits carry their ordinal: ' + suggestionHits[1].href)
  // Clicking a hit is a place you can come back from, on the open page as much as
  // on another one — typing the query is what must not litter the history, not
  // deciding to go and look at something.
  await page.click('#page-tree .tree-hits .tree-hit:nth-child(2)')
  await page.waitForURL(u => /\?q=suggestion&n=1$/.test(u.toString()), { timeout: 15000 })
  await page.evaluate(() => history.back())
  await page.waitForURL(u => /\?q=suggestion$/.test(u.toString()), { timeout: 15000 })
  assert.ok(await page.$('#editor mark.search-hl'), 'going back from a hit keeps the search running')
  // a common word overruns the per-page snippet list, and the ones it did not
  // print are still counted — the pill and the "+n more" row have to add up
  await page.fill('#sidebar-search', 'the')
  await waitFor(async () => !!(await page.$('#page-tree .tree-hit.more')), 'a common word overruns the snippet list')
  const capped = await page.evaluate(() => {
    const li = document.querySelector('#page-tree li:has(> .page-row > a.current)')
    return {
      count: Number(li.querySelector('.tree-hit-count').textContent),
      listed: li.querySelectorAll(':scope > .tree-hits .tree-hit:not(.more)').length,
      more: li.querySelector(':scope > .tree-hits .tree-hit.more').textContent,
      marks: document.querySelectorAll('#editor mark.search-hl').length,
    }
  })
  assert.ok(capped.listed < capped.count, `the snippet list is capped (${capped.listed}) where the count is not (${capped.count})`)
  assert.strictEqual(capped.count, capped.marks, 'the count still matches what is marked in the document: ' + JSON.stringify(capped))
  assert.strictEqual(capped.more, `+${capped.count - capped.listed} more matches`, 'the unlisted hits are accounted for: ' + JSON.stringify(capped))
  // Two occurrences in one sentence produce the same excerpt, and each must bold
  // its OWN one — re-finding the query inside the excerpt would bold the first
  // occurrence twice and send the second hit to the first hit's words.
  const bolded = await page.$$eval('#page-tree .tree-hit-text', ts => ts.map(t => ({
    text: t.textContent,
    at: t.firstChild.textContent.length, // the excerpt is [before, <b>, after]
  })))
  const twins = bolded.filter(a => bolded.some(b => b !== a && b.text === a.text))
  assert.ok(twins.length >= 2, 'the fixture has two hits sharing one excerpt: ' + JSON.stringify(bolded.map(b => b.text)))
  assert.ok(new Set(twins.map(t => t.at)).size >= 2, 'they bold their own occurrence, not the same one twice: ' + JSON.stringify(twins))
  console.log('✓ search: body hits with per-hit headings, true counts, in-document marks')

  // a title match bolds the matched part of the title and stays quiet otherwise:
  // there is no body hit to list for it
  await page.fill('#sidebar-search', 'note')
  await waitFor(async () => !!(await page.$('#page-tree .page-row a b')), 'a title query bolds what it matched')
  const titleMatches = await page.$$eval('#page-tree .page-row a:has(b)', as => as.map(a => ({
    title: a.querySelector('.tree-title')?.textContent,
    bold: a.querySelector('b')?.textContent,
  })))
  assert.ok(titleMatches.some(m => m.title === 'Notes' && m.bold === 'Note'),
    'the matched part of the title is bolded: ' + JSON.stringify(titleMatches))

  // a query that only exists on another page pulls that page up, and clicking the
  // hit navigates there and scrolls to it
  await page.fill('#sidebar-search', 'defines the tree')
  await waitFor(async () => (await hitRows('*')).length === 1, 'a phrase only on the Notes page finds only that page')
  assert.deepStrictEqual(
    await page.$$eval('#page-tree .page-row a .tree-title', ts => ts.map(t => t.textContent.trim())),
    ['Notes'],
    'the tree is filtered down to the page that contains the phrase'
  )
  await page.click('#page-tree .tree-hit')
  await page.waitForURL(u => /\/notes\?q=/.test(u.toString()), { timeout: 15000 })
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 1, 'the hit is marked on the page it navigated to')
  const onScreen = await page.evaluate(() => {
    const m = document.querySelector('#editor mark.search-hl')
    const r = m.getBoundingClientRect()
    return r.top > 0 && r.bottom < window.innerHeight
  })
  assert.ok(onScreen, 'the clicked hit is scrolled into view')
  console.log('✓ search: clicking a hit on another page navigates and lands on it')

  // ?q= is a deep link: it starts the search, marks the document and jumps to the
  // named hit — this is what the hrefs above resolve to for someone you send one to
  await page.goto(`${playgroundHome}?q=greet`, { waitUntil: 'domcontentloaded' })
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.inputValue('#sidebar-search')) === 'greet', 'a ?q= link arrives with the search box filled in')
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length > 0, 'a ?q= link marks the document once it has synced')
  // the hit list can only fill in once the socket has synced the text, which on a
  // cold load lands after the shell has already painted the tree
  await waitFor(async () => JSON.stringify((await hitRows()).map(h => h.heading)) === '["Code"]',
    'the deep-linked hit is listed under its heading')
  await waitFor(
    async () => page.evaluate(() => {
      const r = document.querySelector('#editor mark.search-hl').getBoundingClientRect()
      return r.top > 0 && r.bottom < window.innerHeight
    }),
    'a ?q= link scrolls its first hit into view'
  )

  // `n=` is whatever the URL said, so it can name a hit that does not exist. That
  // must not leave the reader on an unscrolled page while the frame budget drains
  // (~10s of it) — once the marks stop arriving, the last hit is the answer.
  await page.goto(`${playgroundHome}?q=greet&n=99999`, { waitUntil: 'domcontentloaded' })
  await page.waitForSelector('.tiptap')
  await waitFor(
    async () => page.evaluate(() => {
      const ms = document.querySelectorAll('#editor mark.search-hl')
      if (!ms.length) return false
      const r = ms[ms.length - 1].getBoundingClientRect()
      return r.top > 0 && r.bottom < window.innerHeight
    }),
    'an out-of-range n= settles on the last hit instead of spinning',
    6000
  )

  // The index is the live CRDT, not a snapshot the server took: text typed now is
  // searchable now. Done on Notes, which carries none of home's seeded
  // suggestions — typing into a block one of those is anchored to is a different
  // test, and not this one's business.
  await page.goto(`${playgroundHome}/notes`, { waitUntil: 'domcontentloaded' })
  await page.waitForSelector('.tiptap')
  await page.fill('#sidebar-search', 'quokka')
  await waitFor(async () => !!(await page.$('#page-tree .tree-empty')), 'a query that matches nothing says so instead of emptying the sidebar')
  await page.evaluate(() => window.__editor.chain().focus('end').insertContent(' quokka ').run())
  await waitFor(async () => (await hitRows()).length === 1, 'text typed while the search is running becomes a hit')
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 1, 'and is marked as it is typed')
  await page.evaluate(() => window.__editor.commands.undo())
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 0, 'undoing the text takes its hit away again')

  // The invariant both walks rest on: a non-text inline node counts as exactly
  // one character, because that is what it costs in a ProseMirror position. Get
  // that wrong and every mark after an atom in the same block slides left by one
  // per atom — so this paragraph puts a mark AND a formula ahead of the hit.
  // Nothing in the seeded fixture does (its images are their own blocks), which
  // is why this is built here rather than searched for. Built as explicit JSON
  // because the markdown seeder does not parse inline `$…$` — it survives as
  // literal text, and literal text would not test anything: a marked text node
  // still costs one position per character, so only a real atom bites.
  await page.evaluate(() =>
    window.__editor
      .chain()
      .focus('end')
      .insertContent({
        type: 'paragraph',
        content: [
          { type: 'text', marks: [{ type: 'bold' }], text: 'Bold' },
          { type: 'text', text: ' and ' },
          { type: 'mathInline', attrs: { latex: 'x^2' } },
          { type: 'text', text: ' then wombat here, but wom' },
          { type: 'mathInline', attrs: { latex: 'y' } },
          { type: 'text', text: 'bat is two words with a formula in it.' },
        ],
      })
      .run()
  )
  await page.waitForSelector('.tiptap .math-inline', { timeout: 5000 })
  await page.fill('#sidebar-search', 'wombat')
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length > 0, 'a hit sitting after an atom is still marked')
  // Two things at once, and each fails on a different slip. The count: a formula
  // interrupts a word, so `wom`+formula+`bat` is NOT the query — count the atom
  // as zero characters and it becomes a spurious hit the sidebar never counted.
  // The text: the mark has to land ON the query, which is what the position
  // arithmetic after two atoms is for.
  const searchAtomHit = await page.evaluate(() => ({
    marks: [...document.querySelectorAll('#editor mark.search-hl')].map(m => m.textContent),
    pill: Number(document.querySelector('#page-tree .page-row:has(a.current) .tree-hit-count')?.textContent || 1),
  }))
  assert.deepStrictEqual(searchAtomHit.marks, ['wombat'],
    'an atom is one unmatchable character: the query is marked once, exactly, and does not span a formula: ' + JSON.stringify(searchAtomHit))
  assert.strictEqual(searchAtomHit.pill, searchAtomHit.marks.length,
    'and the sidebar counted the same hits the document marked: ' + JSON.stringify(searchAtomHit))
  // put the page back for the sub-tests after this one (seeded text predates this
  // session, so it is not in the undo history and cannot be walked back by mistake)
  await page.evaluate(() => { for (let i = 0; i < 60; i++) window.__editor.commands.undo() })
  await waitFor(async () => !(await page.$('.tiptap .math-inline')), 'the probe paragraph is undone again')
  assert.ok(!(await page.textContent('.tiptap')).includes('wombat'), 'and takes its text with it')

  // clearing puts everything back, including drag-and-drop
  await page.click('#sidebar-search-key')
  await waitFor(async () => (await page.$$('#editor mark.search-hl')).length === 0, 'clearing the box drops the marks')
  assert.strictEqual(await page.inputValue('#sidebar-search'), '', 'the ✕ badge empties the box')
  assert.ok(!/\?q=/.test(page.url()), 'and takes ?q= out of the URL: ' + page.url())
  assert.ok(await page.evaluate(() => document.querySelectorAll('#page-tree [data-td-row]').length > 0), 'rows are draggable again')
  console.log('✓ search: ?q= deep links, live index, empty state, clear restores the tree')

  // back where the rest of the playground sub-tests expect to be
  await page.goto(playgroundHome, { waitUntil: 'domcontentloaded' })
  await waitFor(async () => (await page.$$('.card.suggestion')).length >= 1, 'back on the playground home page')

  // revision chain: ‹ 2/3 shows generation two inline
  assert.ok(await page.$('.chain-nav'), 'chain nav present')
  assert.equal(await page.textContent('.chain-pos'), '3/3', 'chain defaults to latest')
  await page.click('.chain-nav .iconbtn:first-child')
  await page.waitForTimeout(400)
  assert.equal(await page.textContent('.chain-pos'), '2/3', 'nav moves to generation 2')
  const gen2Text = await page.textContent('.tiptap')
  assert.ok(gen2Text.includes('generation') && gen2Text.includes('sharper'), 'inline diff follows the displayed generation')
  await page.click('.chain-nav .iconbtn:last-child')
  await page.waitForTimeout(300)
  console.log('✓ revision chain navigation ‹ n/N ›')

  // Feedback derived from one request stays as standalone cards. Focusing the
  // source comment highlights every related card and its inline change.
  const family = await page.evaluate(() => {
    const origin = [...document.querySelectorAll('.card.thread')].find(c => c.textContent.includes('Can we end on something stronger?'))
    const related = origin && document.querySelector(`.card.suggestion[data-origin="${origin.dataset.item}"]`)
    return { origin: origin?.dataset.item || null, related: related?.dataset.item || null }
  })
  assert.ok(family.origin && family.related, 'origin and related suggestion are separate cards: ' + JSON.stringify(family))
  const relatedCardLayout = await page.evaluate(id => {
    const card = document.querySelector(`.card.suggestion[data-item="${id}"]`)
    const head = card.querySelector('.head')
    const cardRect = card.getBoundingClientRect()
    const actionsRect = card.querySelector('.head-actions').getBoundingClientRect()
    return {
      head: [head.clientWidth, head.scrollWidth],
      cardRight: Math.round(cardRect.right),
      actionsRight: Math.round(actionsRect.right),
    }
  }, family.related)
  assert.ok(relatedCardLayout.head[1] <= relatedCardLayout.head[0] + 1, 'suggestion header does not overflow: ' + JSON.stringify(relatedCardLayout))
  assert.ok(relatedCardLayout.actionsRight <= relatedCardLayout.cardRight, 'suggestion actions remain inside the card: ' + JSON.stringify(relatedCardLayout))
  await page.click(`.card.thread[data-item="${family.origin}"]`)
  await waitFor(async () => !!(await page.$(`.card.suggestion[data-item="${family.related}"].origin-related`)), 'related suggestion highlighted from origin')
  assert.ok(await page.$(`.tiptap .suggestion-hl[data-sugg="${family.related}"].active`), 'related inline change highlighted from origin')

  // Closing the source must not sever the trail. The derived card names the
  // closed source and can reveal/focus it again through the existing resolved
  // items view.
  await page.click(`.card.thread[data-item="${family.origin}"] .close-btn`)
  await waitFor(async () => await page.evaluate(id => {
    const card = document.querySelector(`.card.thread[data-item="${id}"]`)
    return !card || card.textContent.includes('closed')
  }, family.origin), 'origin closes')
  await waitFor(async () => (await page.textContent(`.card.suggestion[data-item="${family.related}"] .origin-link`)).includes('closed'), 'derived card identifies its closed origin')
  await page.click(`.card.suggestion[data-item="${family.related}"] .origin-link`)
  await waitFor(async () => !!(await page.$(`.card.thread[data-item="${family.origin}"].expanded`)), 'closed origin revealed and focused')
  assert.ok(await page.$(`.card.suggestion[data-item="${family.related}"].origin-related`), 'related card remains highlighted for a closed origin')
  // Restore the seeded source so the independent close-button regression below
  // still has an open comment to exercise.
  await page.evaluate(id => window.__ydoc.getMap('threads').get(id).set('resolved', false), family.origin)
  await waitFor(async () => !!(await page.$(`.card.thread[data-item="${family.origin}"] .close-btn`)), 'origin restored for remaining playground checks')

  await page.click(`.card.suggestion[data-item="${family.related}"] .accept-btn`)
  await waitFor(async () => (await page.textContent('.tiptap')).includes('go break things'), 'standalone accept applies')
  console.log('✓ standalone feedback cards retain and highlight their common origin')

  // comment closable without opening the card
  assert.equal(await page.textContent('.card.thread .close-btn'), 'Close', 'collapsed thread has a Close button')
  await page.click('.card.thread .close-btn')
  await waitFor(async () => !(await page.$('.card.thread:not(.expanded) .close-btn')), 'thread closed from collapsed head')
  console.log('✓ comment closes without opening')

  // image bubble: width + alignment
  const img = await page.$('.tiptap img:not(.ProseMirror-separator)')
  await img.scrollIntoViewIfNeeded()
  await img.click()
  await page.waitForTimeout(400)
  assert.ok(await page.evaluate(() => !document.getElementById('image-bubble').classList.contains('hidden')), 'bubble appears on image selection')
  for (const title of ['Width 50%', 'Align center']) {
    await page.evaluate(t => {
      ;[...document.querySelectorAll('#image-bubble .iconbtn')].find(b => b.title === t).dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
    }, title)
    await page.waitForTimeout(300)
  }
  const imgAttrs = await page.evaluate(() => {
    const i = document.querySelector('.tiptap img:not(.ProseMirror-separator)')
    return { style: i.getAttribute('style') || '', align: i.getAttribute('data-align') }
  })
  assert.ok(imgAttrs.style.includes('50%') && imgAttrs.align === 'center', 'image resized + centered: ' + JSON.stringify(imgAttrs))
  console.log('✓ image layout bubble (resize + align)')

  // the structure page left the sidebar but stays reachable by URL
  assert.ok(!(await page.$('#structure-link')), 'no structure link in the sidebar')
  {
    const docPath = await page.evaluate(() => location.pathname.split('/').slice(0, 3).join('/'))
    await page.goto(BASE + docPath + '/_structure')
    await page.waitForSelector('#structure-hint', { timeout: 8000 })
    await page.goBack()
    await page.waitForSelector('.tiptap', { timeout: 8000 })
  }

  // [[ cross-reference: autocomplete inserts a page link
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('See also [[not')
  await waitFor(async () => !(await page.evaluate(() => document.getElementById('pagelink-menu').classList.contains('hidden'))), 'pagelink menu appears')
  await page.keyboard.press('Enter')
  await waitFor(async () => page.evaluate(() => [...document.querySelectorAll('.tiptap a')].some(a => a.textContent === 'Notes' && a.getAttribute('href').endsWith('/notes'))), 'cross-reference link inserted')
  console.log('✓ [[ page cross-references')

  // --- a link you can actually click ---
  // In an editor a plain click has to place the caret, so following a link
  // needed ctrl/cmd+click — with nothing on screen saying so, a cross-reference
  // just looked broken. A plain click now raises a bubble naming the target,
  // with an Open button for a mouse to press.
  const linkSel = '.tiptap a[href$="/notes"]'
  await page.click(linkSel)
  await waitFor(async () => !(await page.evaluate(() => document.getElementById('link-bubble').classList.contains('hidden'))), 'a plain click raises the link bubble')
  const bubble = await page.evaluate(() => {
    const b = document.getElementById('link-bubble')
    const link = document.querySelector('.tiptap a[href$="/notes"]').getBoundingClientRect()
    const box = b.getBoundingClientRect()
    return {
      target: b.querySelector('.lb-target').textContent,
      actions: [...b.querySelectorAll('button')].map(x => x.textContent.trim() || x.dataset.tip),
      nearTheLink: Math.abs(box.left - link.left) < 80 && box.top > link.top,
      onScreen: box.left >= 0 && box.right <= innerWidth && box.bottom <= innerHeight,
    }
  })
  assert.strictEqual(bubble.target, 'Notes', 'the bubble names the page it goes to, not a raw URL')
  assert.ok(bubble.actions.includes('Open'), 'and offers Open: ' + JSON.stringify(bubble.actions))
  assert.ok(bubble.nearTheLink && bubble.onScreen, 'anchored to the link, inside the window: ' + JSON.stringify(bubble))
  const urlBeforeOpen = page.url()
  await page.click('#link-bubble .btn')
  await waitFor(async () => page.url().endsWith('/notes'), 'Open follows the link')
  assert.notStrictEqual(page.url(), urlBeforeOpen, 'and it actually moved')

  // ctrl+click must keep working for anyone who already knows it
  await page.goBack()
  await page.waitForSelector('.tiptap', { timeout: 10000 })
  await page.waitForTimeout(800)
  await page.click(linkSel, { modifiers: ['Control'] })
  await waitFor(async () => page.url().endsWith('/notes'), 'ctrl+click still goes straight there')
  await page.goBack()
  await page.waitForSelector('.tiptap', { timeout: 10000 })
  await page.waitForTimeout(800)
  console.log('✓ link bubble: a plain click offers Open, ctrl+click still follows')

  // --- what you are commenting on stays marked while you type about it ---
  // Focusing the composer moves focus out of the editor, which drops the
  // browser's own selection highlight: the text you picked went unmarked while
  // the box asked you about it.
  await focusDocEnd(page)
  await page.keyboard.press('Enter')
  await page.keyboard.type('A line worth discussing at some length.')
  await page.waitForTimeout(400)
  const pickLine = () => page.evaluate(() => {
    const target = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('A line worth discussing'))
    const pos = window.__editor.view.posAtDOM(target, 0)
    window.__editor.commands.setTextSelection({ from: pos, to: pos + target.textContent.length })
  })
  await pickLine()
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  await page.click('#composer-text')
  await waitFor(async () => page.evaluate(() => document.querySelectorAll('.tiptap .pending-hl').length === 1), 'the pending range is marked once the composer has focus')
  const pending = await page.evaluate(() => {
    const n = document.querySelector('.tiptap .pending-hl')
    const cs = getComputedStyle(n)
    return { text: n.textContent, bg: cs.backgroundColor, style: cs.borderBottomStyle, nativeSelectionGone: getSelection().isCollapsed }
  })
  assert.ok(pending.text.startsWith('A line worth discussing'), 'it marks the text the composer is about: ' + JSON.stringify(pending))
  assert.notStrictEqual(pending.bg, 'rgba(0, 0, 0, 0)', 'and it is actually visible: ' + JSON.stringify(pending))
  assert.strictEqual(pending.style, 'dashed', 'dashed, to read as not-yet-committed: ' + JSON.stringify(pending))

  // and it is scaffolding: cancelling must not leave it behind
  await page.evaluate(() => [...document.querySelectorAll('#composer button')].find(b => /cancel/i.test(b.textContent))?.click())
  await waitFor(async () => page.evaluate(() => document.querySelectorAll('.tiptap .pending-hl').length === 0), 'cancelling clears the mark')
  console.log('✓ composer marks the text it is about, and clears it on cancel')

  // --- a comment and a suggestion on the same words ---
  // Two filled highlights over one range cancelled each other out: the
  // suggestion's insert/delete spans were invisible under the comment tint.
  // the box opens when the selection CHANGES, so move the caret before picking
  // the same line again
  await focusDocEnd(page)
  await page.waitForTimeout(200)
  await pickLine()
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  await page.fill('#composer-text', 'can this be tightened?')
  await page.click('#composer .primary, #composer button:has-text("Comment")')
  await page.waitForSelector('.card.thread', { timeout: 10000 })
  await page.click('.card.thread') // active, as it is right after commenting
  await page.waitForTimeout(300)
  await page.evaluate(async () => {
    const id = location.pathname.split('/d/')[1].split('/')[0]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const idx = (snap.blocks || []).findIndex(b => (b.markdown || '').includes('A line worth discussing'))
    await fetch(`/api/docs/${id}/suggestions`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ block_index: idx, replacement_markdown: 'A line worth debating at some length.', rationale: 'sharper verb' }),
    })
  })
  await waitFor(async () => page.evaluate(() => document.querySelectorAll('.tiptap .sugg-ins').length > 0), 'the suggestion reaches the document')
  const overlap = await page.evaluate(() => {
    const opaque = c => c !== 'rgba(0, 0, 0, 0)' && c !== 'transparent'
    const commentHl = [...document.querySelectorAll('.tiptap .comment-hl')]
    const ins = [...document.querySelectorAll('.tiptap .sugg-ins')]
    return {
      commentMarked: commentHl.every(n => n.classList.contains('with-sugg')),
      commentUnderlined: commentHl.every(n => ['dotted', 'dashed', 'solid'].includes(getComputedStyle(n).borderBottomStyle)),
      commentFilled: commentHl.some(n => opaque(getComputedStyle(n).backgroundColor)),
      insFilled: ins.length > 0 && ins.every(n => opaque(getComputedStyle(n).backgroundColor)),
      insText: ins.map(n => n.textContent.trim()),
    }
  })
  assert.ok(overlap.commentMarked, 'the comment knows it is sharing text with a suggestion: ' + JSON.stringify(overlap))
  assert.ok(!overlap.commentFilled, 'so it gives up its fill: ' + JSON.stringify(overlap))
  assert.ok(overlap.commentUnderlined, 'but stays marked by its underline: ' + JSON.stringify(overlap))
  assert.ok(overlap.insFilled, 'and the inserted words keep a visible fill of their own: ' + JSON.stringify(overlap))
  console.log('✓ a suggestion stays visible on text that already carries a comment')

  // --- hover the right of the page: a comment anchored to a place, not a span ---
  // The Google-Docs affordance. Everything here is about it staying out of the
  // way: no gutter, nothing visible until the pointer is in the right third,
  // and nothing at all while a selection owns the comment flow.
  // Clear the margin first. Cards are stacked, never overlapped: a card whose
  // anchor is already occupied gets pushed down the panel, and the alignment this
  // feature promises could not be measured through the pile the tests above left.
  // (The playground reset further down puts the seeded cards back.)
  await waitFor(
    async () =>
      (await page.evaluate(() => {
        document.querySelectorAll('#margin-items .close-btn, #margin-items .reject-btn').forEach(b => b.click())
        return document.querySelectorAll('#margin-items .card').length
      })) === 0,
    'margin cleared for the hover checks',
    20000
  )
  // appended through the editor rather than typed, so it is definitely the LAST
  // block on the page — which is what makes the deletion case below deterministic
  await page.evaluate(() => {
    const e = window.__editor
    e.commands.insertContentAt(e.state.doc.content.size, {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Bees navigate by polarised light, which is the part nobody expects.' }],
    })
  })
  await page.waitForTimeout(400)
  const hlBefore = (await page.$$('.tiptap .comment-hl')).length

  // measure fresh each time — typing at the end of the document scrolls
  const beeGeom = () =>
    page.evaluate(() => {
      const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Bees navigate'))
      p.scrollIntoView({ block: 'center' })
      const r = p.getBoundingClientRect()
      const sheet = document.getElementById('editor').getBoundingClientRect()
      const text = document.querySelector('.tiptap').getBoundingClientRect()
      return { top: r.top, mid: r.top + r.height / 2, sheet, textRight: text.right }
    })
  let g = await beeGeom()
  const hoverBtn = () =>
    page.evaluate(() => {
      const b = document.getElementById('hover-comment')
      const r = b.getBoundingClientRect()
      return { hidden: b.classList.contains('hidden'), left: r.left, right: r.right, mid: r.top + r.height / 2 }
    })

  // arming the zone must not move the page: the button lives in the page's own
  // right margin, absolutely positioned, so nothing reflows
  const widthBefore = await page.evaluate(() => document.getElementById('editor').getBoundingClientRect().width)
  await page.mouse.move(g.sheet.left + g.sheet.width * 0.2, g.mid)
  await page.waitForTimeout(120)
  assert.ok((await hoverBtn()).hidden, 'no button while the pointer is in the left two thirds')

  await page.mouse.move(g.sheet.left + g.sheet.width * 0.85, g.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'the right third reveals the comment button')
  const btn = await hoverBtn()
  const widthAfter = await page.evaluate(() => document.getElementById('editor').getBoundingClientRect().width)
  assert.equal(widthAfter, widthBefore, 'revealing it does not add a gutter')
  assert.ok(btn.left > g.textRight, `it sits out in the page margin, clear of the text (${btn.left} > ${g.textRight})`)
  assert.ok(btn.right < g.sheet.right, 'and still on the paper, not off its edge')
  assert.ok(Math.abs(btn.mid - (g.top + 9)) < 14, `level with the paragraph it is beside (btn ${btn.mid}, para top ${g.top})`)

  // A live selection owns the comment flow, and TWO separate rules enforce that.
  // They have to be checked separately: the button is armed by a real pointer move
  // above, and then nothing but the selection changes, so the first assertion can
  // only be satisfied by the selectionUpdate drop in bindSelectionMenu. Dispatching
  // a mousemove first — which is what this test used to do — re-enters
  // updateHoverComment and is caught by its own empty-selection bail instead, so
  // the keyboard rule went uncovered and deleting it left the suite green.
  // Both run inside the 220ms settle, before the selection composer opens, so
  // neither is really testing "a box is open".
  const hoverSelRules = await page.evaluate(async () => {
    const btnHidden = () => document.getElementById('hover-comment').classList.contains('hidden')
    const frame = () => new Promise(done => requestAnimationFrame(() => requestAnimationFrame(done)))
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Bees navigate'))
    const armed = !btnHidden() // the pointer move above really did arm it
    // rule 1: a keyboard selection, with no pointer event anywhere near it
    const pos = window.__editor.view.posAtDOM(p, 0)
    window.__editor.commands.setTextSelection({ from: pos, to: pos + 12 })
    await frame()
    const afterKeyboardSelection = btnHidden()
    // rule 2: a pointer event arriving while that selection still stands must not
    // re-arm it — the drag that ends in the right third
    const sheet = document.getElementById('editor').getBoundingClientRect()
    const r = p.getBoundingClientRect()
    document.getElementById('editor-col').dispatchEvent(
      new MouseEvent('mousemove', { clientX: sheet.left + sheet.width * 0.85, clientY: r.top + r.height / 2, bubbles: true })
    )
    await frame()
    return {
      armed,
      afterKeyboardSelection,
      afterPointerDuringSelection: btnHidden(),
      composerOpen: !document.getElementById('composer').classList.contains('hidden'),
    }
  })
  assert.ok(hoverSelRules.armed, 'the pointer had really armed the button first: ' + JSON.stringify(hoverSelRules))
  assert.ok(hoverSelRules.afterKeyboardSelection, 'a keyboard selection drops it with no pointer event to notice: ' + JSON.stringify(hoverSelRules))
  assert.ok(hoverSelRules.afterPointerDuringSelection, 'and a pointer move cannot re-arm it while the selection stands: ' + JSON.stringify(hoverSelRules))
  // and it stays away over the box that selection opens
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  g = await beeGeom()
  await page.mouse.move(g.sheet.left + g.sheet.width * 0.85, g.mid)
  await page.waitForTimeout(150)
  assert.ok((await hoverBtn()).hidden, 'and hidden while the selection composer is open')
  await page.evaluate(() => [...document.querySelectorAll('#composer button')].find(b => /cancel/i.test(b.textContent))?.click())
  await focusDocEnd(page)
  await page.waitForTimeout(250)

  // click it: a composer with a locator instead of a quote, and the paragraph
  // marked as where the comment is about to land
  g = await beeGeom()
  await page.mouse.move(g.sheet.left + g.sheet.width * 0.85, g.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'button back after the selection is gone')
  await page.click('#hover-comment')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  const opened = await page.evaluate(() => {
    const mark = document.querySelector('.tiptap .comment-anchor.pending')
    return {
      quoteHidden: document.getElementById('composer-quote').classList.contains('hidden'),
      loc: document.getElementById('composer-loc').textContent,
      locShown: !document.getElementById('composer-loc').classList.contains('hidden'),
      markText: mark?.textContent || null,
      pendingSpans: document.querySelectorAll('.tiptap .pending-hl').length,
      composerTop: document.getElementById('composer').getBoundingClientRect().top,
    }
  })
  assert.ok(opened.quoteHidden, 'no blockquote: there is nothing quoted: ' + JSON.stringify(opened))
  assert.ok(opened.locShown && opened.loc.includes('Bees navigate'), 'the locator says where instead: ' + JSON.stringify(opened))
  assert.equal(opened.pendingSpans, 0, 'and no span is underlined as if the words were the subject')
  assert.ok(opened.markText?.startsWith('Bees navigate'), 'the paragraph it will land beside is marked: ' + JSON.stringify(opened))
  assert.ok(Math.abs(opened.composerTop - g.top) < 40, `the box opens level with that paragraph (${opened.composerTop} vs ${g.top})`)

  await page.fill('#composer-text', 'Worth a footnote here?')
  await page.click('#composer .primary, #composer button:has-text("Comment")')
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 1, 'a position-anchored card lands in the margin')
  const posted = await page.evaluate(async () => {
    const card = document.querySelector('.card.thread .anchor-loc').closest('.card')
    const id = location.pathname.split('/d/')[1].split('/')[0]
    const snap = await (await fetch(`/api/docs/${id}`)).json()
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Bees navigate'))
    return {
      loc: card.querySelector('.anchor-loc').textContent,
      quotes: card.querySelectorAll('blockquote').length,
      orphaned: card.querySelector('.anchor-loc').classList.contains('orphaned'),
      cardTop: card.getBoundingClientRect().top,
      paraTop: p.getBoundingClientRect().top,
      activeMark: document.querySelector('.tiptap .comment-anchor.active')?.textContent || null,
      hls: document.querySelectorAll('.tiptap .comment-hl').length,
      thread: (snap.threads || []).find(t => t.anchor_kind === 'position') || null,
    }
  })
  assert.ok(posted.loc.includes('Bees navigate'), 'the card shows the paragraph it sits beside: ' + JSON.stringify(posted))
  assert.equal(posted.quotes, 0, 'and quotes nothing')
  assert.ok(!posted.orphaned, 'the paragraph is still there, so it is not orphaned')
  assert.ok(Math.abs(posted.cardTop - posted.paraTop) < 40, `the card sits next to that paragraph (${posted.cardTop} vs ${posted.paraTop})`)
  assert.ok(posted.activeMark?.startsWith('Bees navigate'), 'the open card marks its paragraph: ' + JSON.stringify(posted))
  assert.equal(posted.hls, hlBefore, 'and adds no comment underline — nothing here is about those words')
  assert.ok(posted.thread, 'the API reports the anchor kind: ' + JSON.stringify(posted.thread))
  assert.equal(posted.thread.excerpt, null, 'excerpt stays null — no words are quoted')
  assert.ok(posted.thread.anchor_context.startsWith('Bees navigate'), 'anchor_context carries the place: ' + JSON.stringify(posted.thread))
  console.log('✓ hover comment: right third only, anchored to a place, quotes nothing')

  // --- the anchored paragraph is deleted ---
  // Kept and never auto-closed: deleting text must not silently end a conversation
  // about it. The anchor resolves to the gap the paragraph left, which is not
  // inside any block, so the card reads as orphaned — and because that gap is
  // still where the paragraph was, it holds its row in the panel rather than
  // dropping to the bottom.
  const paraTopBefore = posted.paraTop
  await page.evaluate(() => {
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Bees navigate'))
    const pos = window.__editor.view.posAtDOM(p, 0)
    const $p = window.__editor.state.doc.resolve(pos)
    window.__editor.view.dispatch(window.__editor.state.tr.delete($p.before($p.depth), $p.after($p.depth)))
  })
  // the editor, not the body: the card's locator still carries those words, which
  // is the whole point of the assertions below
  await waitFor(async () => page.evaluate(() => !document.querySelector('.tiptap').textContent.includes('Bees navigate by polarised')), 'the paragraph is gone')
  await waitFor(
    async () => page.evaluate(() => document.querySelector('.card.thread .anchor-loc')?.classList.contains('orphaned') === true),
    'the card notices its paragraph was deleted'
  )
  const afterDelete = await page.evaluate(() => {
    const loc = document.querySelector('.card.thread .anchor-loc')
    return {
      words: loc.textContent,
      struck: getComputedStyle(loc.querySelector('.words')).textDecorationLine,
      title: loc.title,
      closed: loc.closest('.card').textContent.includes('closed'),
      cardTop: loc.closest('.card').getBoundingClientRect().top,
      marks: document.querySelectorAll('.tiptap .comment-anchor').length,
    }
  })
  assert.ok(afterDelete.words.includes('Bees navigate'), 'the words are all that is left of the place, so they stay: ' + JSON.stringify(afterDelete))
  assert.equal(afterDelete.struck, 'line-through', 'struck through to say the paragraph is gone')
  assert.ok(/deleted/.test(afterDelete.title), 'and it says so: ' + JSON.stringify(afterDelete))
  assert.ok(!afterDelete.closed, 'the thread is NOT auto-closed')
  assert.equal(afterDelete.marks, 0, 'nothing in the document is marked any more: ' + JSON.stringify(afterDelete))
  assert.ok(Math.abs(afterDelete.cardTop - paraTopBefore) < 90, `the card stays where the paragraph was (${afterDelete.cardTop} vs ${paraTopBefore})`)
  // close only this one, so the margin the later checks see is the one they left
  await page.evaluate(() => document.querySelector('.card.thread .anchor-loc')?.closest('.card').querySelector('.close-btn')?.click())
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 0, 'an orphaned thread still closes normally')
  console.log('✓ a deleted paragraph orphans its position comment, keeps it, and keeps its place')

  // Same again with content AFTER the anchored paragraph, which is the case that
  // could plausibly differ (y-prosemirror's diff is free to reuse a surviving
  // sibling element instead of deleting one, and then the anchor would still be
  // inside a live block). Measured, it does not differ here — but rather than
  // assert a branch of someone else's diff, the assertion below is the invariant
  // that has to hold whichever branch runs: the card reads as orphaned exactly
  // when the words really are gone from the page.
  await page.evaluate(() => {
    const e = window.__editor
    e.commands.insertContentAt(e.state.doc.content.size, {
      type: 'doc',
      content: [
        { type: 'paragraph', content: [{ type: 'text', text: 'Wasps, by contrast, remember faces for weeks on end.' }] },
        { type: 'paragraph', content: [{ type: 'text', text: 'Trailing paragraph so the one above is not the last.' }] },
      ],
    })
  })
  await page.waitForTimeout(400)
  const waspGeom = () =>
    page.evaluate(() => {
      const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Wasps, by contrast'))
      p.scrollIntoView({ block: 'center' })
      const r = p.getBoundingClientRect()
      const sheet = document.getElementById('editor').getBoundingClientRect()
      return { top: r.top, mid: r.top + r.height / 2, sheet }
    })
  const wg = await waspGeom()
  await page.mouse.move(wg.sheet.left + wg.sheet.width * 0.85, wg.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'button arms beside the middle paragraph')
  await page.click('#hover-comment')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  await page.fill('#composer-text', 'Source for this?')
  await page.click('#composer .primary, #composer button:has-text("Comment")')
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 1, 'second position comment posted')
  const waspTopBefore = (await waspGeom()).top
  await page.evaluate(() => {
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith('Wasps, by contrast'))
    const pos = window.__editor.view.posAtDOM(p, 0)
    const $p = window.__editor.state.doc.resolve(pos)
    window.__editor.view.dispatch(window.__editor.state.tr.delete($p.before($p.depth), $p.after($p.depth)))
  })
  await waitFor(async () => page.evaluate(() => !document.querySelector('.tiptap').textContent.includes('Wasps, by contrast')), 'the middle paragraph is gone')
  await page.waitForTimeout(400)
  const midDelete = await page.evaluate(() => {
    const loc = document.querySelector('.card.thread .anchor-loc')
    if (!loc) return null
    return {
      words: loc.textContent,
      orphaned: loc.classList.contains('orphaned'),
      docHasWords: document.querySelector('.tiptap').textContent.includes('Wasps, by contrast'),
      closed: loc.closest('.card').textContent.includes('closed'),
      top: loc.closest('.card').getBoundingClientRect().top,
    }
  })
  assert.ok(midDelete, 'the comment survives its paragraph being deleted')
  assert.ok(midDelete.words.includes('Wasps, by contrast'), 'and still names the paragraph it was left beside: ' + JSON.stringify(midDelete))
  assert.ok(!midDelete.closed, 'deleting text never closes the conversation about it')
  assert.equal(midDelete.orphaned, !midDelete.docHasWords, 'orphaned exactly when the words really are gone: ' + JSON.stringify(midDelete))
  assert.ok(Math.abs(midDelete.top - waspTopBefore) < 90, `and it stays where that paragraph was (${midDelete.top} vs ${waspTopBefore})`)
  await page.evaluate(() => document.querySelector('.card.thread .anchor-loc')?.closest('.card').querySelector('.close-btn')?.click())
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 0, 'and it closes normally')
  console.log('✓ deleting a paragraph mid-page keeps the comment, its label and its place')

  // --- a MERGE is not a deletion ---
  // Backspace at the start of the anchored paragraph joins it into the one above:
  // the most ordinary way a paragraph stops existing. The block boundary goes, so
  // the anchor lands outside any text block exactly as it does for a real
  // deletion — but every word survives, one line up. The first cut of this feature
  // read "not inside a block" as "deleted" and struck the card through while
  // pointing straight at the text it claimed was gone. Same anchor, same resolve,
  // opposite verdict, decided by whether the remembered words are still beside the
  // boundary.
  const mergeHost = 'Hoverfly larvae eat aphids, which is why gardeners like them.'
  const mergeAnchored = 'Their wing beat is close to two hundred hertz in level flight.'
  await page.evaluate(texts => {
    const e = window.__editor
    e.commands.insertContentAt(e.state.doc.content.size, {
      type: 'doc',
      content: texts.map(t => ({ type: 'paragraph', content: [{ type: 'text', text: t }] })),
    })
  }, [mergeHost, mergeAnchored])
  await page.waitForTimeout(400)
  const mergeGeom = () =>
    page.evaluate(t => {
      const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
      p.scrollIntoView({ block: 'center' })
      const r = p.getBoundingClientRect()
      const sheet = document.getElementById('editor').getBoundingClientRect()
      return { top: r.top, mid: r.top + r.height / 2, sheet }
    }, mergeAnchored)
  const mg = await mergeGeom()
  await page.mouse.move(mg.sheet.left + mg.sheet.width * 0.85, mg.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'button arms beside the paragraph about to be merged')
  await page.click('#hover-comment')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  await page.fill('#composer-text', 'Is two hundred right?')
  await page.click('#composer .primary, #composer button:has-text("Comment")')
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 1, 'comment posted beside it')
  const mergeProbe = () =>
    page.evaluate(t => {
      const loc = document.querySelector('.card.thread .anchor-loc')
      if (!loc) return { collapsed: true, paraCount: document.querySelectorAll('.tiptap p').length }
      return {
        orphaned: loc.classList.contains('orphaned'),
        title: loc.title,
        struck: getComputedStyle(loc.querySelector('.words')).textDecorationLine,
        words: loc.textContent,
        docHasWords: document.querySelector('.tiptap').textContent.includes(t),
        paraCount: document.querySelectorAll('.tiptap p').length,
      }
    }, mergeAnchored)
  const beforeMerge = await mergeProbe()
  assert.ok(!beforeMerge.orphaned, 'live before the merge: ' + JSON.stringify(beforeMerge))
  // Caret to the very start of the anchored paragraph, then Backspace, as a person
  // would. The click is what takes DOM focus — commands.focus() sets the selection
  // but leaves the keystrokes going to the body in headless Chromium (see
  // focusDocEnd) — and setTextSelection then makes the position exact.
  const mergeParaBox = await page.evaluate(t => {
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
    p.scrollIntoView({ block: 'center' })
    const r = p.getBoundingClientRect()
    return { x: r.left + 3, y: r.top + r.height / 2 }
  }, mergeAnchored)
  await page.mouse.click(mergeParaBox.x, mergeParaBox.y)
  await page.waitForFunction(() => window.__editor?.isFocused, null, { timeout: 5000 })
  await page.evaluate(t => {
    const e = window.__editor
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
    e.commands.setTextSelection(e.view.posAtDOM(p, 0))
  }, mergeAnchored)
  await page.keyboard.press('Backspace')
  await waitFor(
    async () => page.evaluate(n => document.querySelectorAll('.tiptap p').length === n - 1, beforeMerge.paraCount),
    'the two paragraphs really did join into one'
  )
  // Clicking into the document to place the caret deselected the card, and a
  // collapsed card has no locator to read — reopen it.
  await page.click('.card.thread .head')
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 1, 'the card is open again after the merge')
  await page.waitForTimeout(400)
  const afterMerge = await mergeProbe()
  assert.ok(afterMerge.docHasWords, 'the words are still on the page after the merge: ' + JSON.stringify(afterMerge))
  assert.ok(!afterMerge.orphaned, 'so the card must NOT claim the paragraph was deleted: ' + JSON.stringify(afterMerge))
  assert.equal(afterMerge.struck, 'none', 'and must not strike the words through')
  assert.ok(!/deleted/.test(afterMerge.title), 'and the tooltip still offers to jump to it: ' + JSON.stringify(afterMerge))
  assert.ok(afterMerge.words.includes('Their wing beat'), 'still naming the place it was left: ' + JSON.stringify(afterMerge))
  // and it still resolves to somewhere sane — the locator jumps without throwing
  const mergeJump = await page.evaluate(() => {
    document.querySelector('.card.thread .anchor-loc').click()
    const e = window.__editor
    return { pos: e.state.selection.from, size: e.state.doc.content.size }
  })
  assert.ok(mergeJump.pos > 0 && mergeJump.pos <= mergeJump.size, 'the locator still resolves: ' + JSON.stringify(mergeJump))
  await page.evaluate(() => document.querySelector('.card.thread .anchor-loc')?.closest('.card').querySelector('.close-btn')?.click())
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 0, 'and closes normally')
  console.log('✓ merging the anchored paragraph away is not reported as a deletion')

  // --- the reason the anchor is a relative position and not an offset ---
  // Insert whole blocks ABOVE a position comment. An offset would slide the
  // comment down the document; the relative position must keep naming the same
  // paragraph and travel with it.
  const driftAnchored = 'Bumblebees can fly in colder air than honeybees manage.'
  await page.evaluate(t => {
    const e = window.__editor
    e.commands.insertContentAt(e.state.doc.content.size, {
      type: 'doc',
      content: [
        { type: 'paragraph', content: [{ type: 'text', text: t }] },
        { type: 'paragraph', content: [{ type: 'text', text: 'A trailing paragraph, so the one above is not the last.' }] },
      ],
    })
  }, driftAnchored)
  await page.waitForTimeout(400)
  const driftGeom = () =>
    page.evaluate(t => {
      const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
      p.scrollIntoView({ block: 'center' })
      const r = p.getBoundingClientRect()
      const sheet = document.getElementById('editor').getBoundingClientRect()
      return { top: r.top, mid: r.top + r.height / 2, sheet }
    }, driftAnchored)
  const dg = await driftGeom()
  await page.mouse.move(dg.sheet.left + dg.sheet.width * 0.85, dg.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'button arms beside the paragraph that must not drift')
  await page.click('#hover-comment')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  await page.fill('#composer-text', 'Worth a citation.')
  await page.click('#composer .primary, #composer button:has-text("Comment")')
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 1, 'comment posted beside it')
  await page.waitForTimeout(300)
  // where the anchor resolves BEFORE anything is inserted above it
  const driftPosBefore = await page.evaluate(() => {
    document.querySelector('.card.thread .anchor-loc').click()
    return window.__editor.state.selection.from
  })
  // three whole paragraphs, inserted above it
  await page.evaluate(t => {
    const e = window.__editor
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
    const $p = e.state.doc.resolve(e.view.posAtDOM(p, 0))
    e.commands.insertContentAt($p.before($p.depth), {
      type: 'doc',
      content: [0, 1, 2].map(i => ({ type: 'paragraph', content: [{ type: 'text', text: `An inserted paragraph, number ${i}.` }] })),
    })
  }, driftAnchored)
  await page.waitForTimeout(600)
  const afterInsertAbove = await page.evaluate(t => {
    const loc = document.querySelector('.card.thread .anchor-loc')
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.startsWith(t.slice(0, 18)))
    // where the anchor actually points now, via the app's own resolve
    loc.click()
    const $sel = window.__editor.state.doc.resolve(window.__editor.state.selection.from)
    return {
      orphaned: loc.classList.contains('orphaned'),
      words: loc.textContent,
      cardTop: loc.closest('.card').getBoundingClientRect().top,
      paraTop: p.getBoundingClientRect().top,
      landedIn: $sel.parent.isTextblock ? $sel.parent.textContent.slice(0, 30) : null,
      pos: window.__editor.state.selection.from,
    }
  }, driftAnchored)
  assert.ok(!afterInsertAbove.orphaned, 'inserting blocks above does not orphan it: ' + JSON.stringify(afterInsertAbove))
  assert.ok(afterInsertAbove.words.includes('Bumblebees can fly'), 'and it still names the same paragraph: ' + JSON.stringify(afterInsertAbove))
  assert.ok(
    afterInsertAbove.landedIn?.startsWith('Bumblebees can fly'),
    'the anchor still points INSIDE that paragraph: ' + JSON.stringify(afterInsertAbove)
  )
  // The pair of assertions is the whole point, and neither alone would do it: the
  // resolved position MOVED (an offset would have stayed put and landed in one of
  // the inserted paragraphs) and it moved to the same paragraph as before.
  assert.ok(
    afterInsertAbove.pos > driftPosBefore,
    `the anchor moved down by what was inserted above it (${driftPosBefore} -> ${afterInsertAbove.pos})`
  )
  assert.ok(
    Math.abs(afterInsertAbove.cardTop - afterInsertAbove.paraTop) < 90,
    `and the card travelled down with it (${afterInsertAbove.cardTop} vs ${afterInsertAbove.paraTop})`
  )
  await page.evaluate(() => document.querySelector('.card.thread .anchor-loc')?.closest('.card').querySelector('.close-btn')?.click())
  await waitFor(async () => (await page.$$('.card.thread .anchor-loc')).length === 0, 'and closes normally')
  console.log('✓ blocks inserted above a position comment do not move it off its paragraph')

  // --- scrolling drops the button ---
  // It is positioned inside #editor-col, so it travels with the text and keeps
  // pointing at its own paragraph — but the pointer that armed it has not moved,
  // so it ends up offering to comment on something nowhere near the cursor.
  const scrollGeom = await page.evaluate(() => {
    const p = [...document.querySelectorAll('.tiptap p')].find(n => n.textContent.length > 40)
    p.scrollIntoView({ block: 'center' })
    const r = p.getBoundingClientRect()
    const sheet = document.getElementById('editor').getBoundingClientRect()
    return { mid: r.top + r.height / 2, sheet }
  })
  await page.mouse.move(scrollGeom.sheet.left + scrollGeom.sheet.width * 0.85, scrollGeom.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'armed before scrolling')
  await page.mouse.wheel(0, 350)
  await waitFor(async () => (await hoverBtn()).hidden, 'a scroll drops the button rather than leaving it beside a paragraph the pointer has left')
  console.log('✓ scrolling without moving the pointer drops the hover button')

  // --- a table row anchors to its leftmost cell ---
  // Every cell in a row shares one Y band, so document order picks the first.
  // Documented at textblockAtHeight; asserted here so it stays a decision.
  await page.evaluate(() => {
    const e = window.__editor
    e.commands.insertContentAt(e.state.doc.content.size, {
      type: 'doc',
      content: [{
        type: 'table',
        content: [{
          type: 'tableRow',
          content: ['Leftmost cell of the row', 'Middle cell', 'Rightmost cell'].map(t => ({
            type: 'tableCell',
            content: [{ type: 'paragraph', content: [{ type: 'text', text: t }] }],
          })),
        }],
      }],
    })
  })
  await page.waitForTimeout(500)
  const cellGeom = await page.evaluate(() => {
    const c = [...document.querySelectorAll('.tiptap td, .tiptap th')].find(n => n.textContent.startsWith('Rightmost cell'))
    c.scrollIntoView({ block: 'center' })
    const r = c.getBoundingClientRect()
    const sheet = document.getElementById('editor').getBoundingClientRect()
    return { mid: r.top + r.height / 2, sheet }
  })
  await page.mouse.move(cellGeom.sheet.left + cellGeom.sheet.width * 0.85, cellGeom.mid)
  await waitFor(async () => !(await hoverBtn()).hidden, 'button arms beside a table row')
  await page.click('#hover-comment')
  await page.waitForSelector('#composer:not(.hidden)', { timeout: 10000 })
  const rowLoc = await page.evaluate(() => document.getElementById('composer-loc').textContent)
  assert.ok(rowLoc.includes('Leftmost cell of the row'), 'level with the last cell, it anchors to the row\'s first: ' + JSON.stringify(rowLoc))
  await page.evaluate(() => [...document.querySelectorAll('#composer button')].find(b => /cancel/i.test(b.textContent))?.click())
  await page.waitForTimeout(200)
  console.log('✓ hovering beside a table row anchors to the row\'s leftmost cell')

  // ghost page: visiting a slug that does not exist creates it, titled by slug
  const projId = page.url().split('/d/')[1].split('/')[0]
  await page.goto(`${BASE}/d/${projId}/road-map`)
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('Road map'), 'ghost page seeded with slug title')
  await waitFor(async () => (await page.$$eval('#page-tree a', as => as.map(a => a.textContent))).some(t => t.includes('Road map')), 'ghost page in sidebar')
  console.log('✓ ghost pages auto-created from the structure')
  await page.goto(`${BASE}/d/${projId}`)
  await page.waitForSelector('.tiptap')
  await page.waitForTimeout(1000)

  // reset restores the seeded state (through the in-app confirm modal)
  await page.click('#reset-btn')
  await page.waitForSelector('.ui-modal')
  await page.click('.ui-modal .btn.primary, .ui-modal .ui-danger')
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('happy testing'), 'reset restores content')
  console.log('✓ playground reset')

  // --- phone layout (same doc, iPhone-sized touch viewport) ---
  // its own browser: chromium runs --single-process here and tears down when
  // its last page closes, so contexts are not swapped mid-run
  await mobileChecks(page.url())

  assert.deepEqual(consoleErrors, [], 'no console errors: ' + JSON.stringify(consoleErrors))
  console.log('✓ zero console errors')

  await browser.close()
  server.kill()
  fs.rmSync(DATA, { recursive: true, force: true })
  console.log('\nBROWSER TEST PASSED — screenshots in ' + SHOT)
  process.exit(0)
}

// The phone shell is a different layout, not just narrower: compact header with
// a ⋯ menu and a toggleable formatting row, the page tree as a drawer, the
// comments as a bottom sheet. Everything below runs at 390x844 with touch.
async function mobileChecks(docUrl) {
  const browser = await chromium.launch({
    headless: true,
    executablePath: process.env.PW_EXECUTABLE || undefined,
    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--single-process'],
  })
  const ctx = await browser.newContext({
    viewport: { width: 390, height: 844 },
    isMobile: true,
    hasTouch: true,
    deviceScaleFactor: 2,
  })
  const page = await ctx.newPage()
  page.on('console', msg => {
    if (msg.type() === 'error' && !msg.text().includes('fonts.g')) consoleErrors.push('mobile: ' + msg.text())
  })
  page.on('pageerror', err => consoleErrors.push('mobile PAGEERROR: ' + err.message))
  // fresh browser => fresh cookie jar: sign in, landing on the same document
  const docPath = new URL(docUrl).pathname
  await page.goto(`${BASE}/auth/dev?u=alice&next=${encodeURIComponent(docPath)}`)
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.$$('.card')).length >= 1, 'mobile cards render')
  await page.waitForTimeout(800)
  const shot = name => page.screenshot({ path: path.join(SHOT, `mobile-${name}.png`) })

  // nothing may widen the page: a phone browser would zoom out to fit
  const width = await page.evaluate(() => ({ inner: window.innerWidth, scroll: document.documentElement.scrollWidth }))
  assert.equal(width.scroll, width.inner, `no horizontal overflow (${JSON.stringify(width)})`)

  // The hover comment affordance does not exist on touch, on purpose: there is
  // no hover to reveal it with, and a button parked in the margin is exactly the
  // gutter the desktop design avoids. Selecting text and tapping Comment is the
  // whole flow here, and it is exercised further down.
  const hoverOnTouch = await page.evaluate(async () => {
    const sheet = document.getElementById('editor').getBoundingClientRect()
    const p = document.querySelector('.tiptap p').getBoundingClientRect()
    document.getElementById('editor-col').dispatchEvent(
      new MouseEvent('mousemove', { clientX: sheet.left + sheet.width * 0.85, clientY: p.top + p.height / 2, bubbles: true })
    )
    await new Promise(done => requestAnimationFrame(() => requestAnimationFrame(done)))
    const b = document.getElementById('hover-comment')
    return {
      noHover: matchMedia('(hover: none)').matches,
      classHidden: b.classList.contains('hidden'),
      display: getComputedStyle(b).display,
    }
  })
  assert.ok(hoverOnTouch.noHover, 'the phone viewport really is a no-hover one: ' + JSON.stringify(hoverOnTouch))
  assert.ok(hoverOnTouch.classHidden, 'a synthetic hover cannot arm it: ' + JSON.stringify(hoverOnTouch))
  assert.equal(hoverOnTouch.display, 'none', 'and CSS keeps it gone even if something did')

  // the header must stay put at any scroll depth (regression: body{height:100%}
  // made the sticky containing block one viewport tall)
  for (const y of [900, 2500]) {
    await page.evaluate(scrollY => window.scrollTo(0, scrollY), y)
    await page.waitForTimeout(250)
    const top = await page.evaluate(() => Math.round(document.getElementById('topbar').getBoundingClientRect().top))
    assert.equal(top, 0, `header pinned at scrollY=${y} (top=${top})`)
  }
  await page.evaluate(() => window.scrollTo(0, 0))
  await page.waitForTimeout(200)
  await shot('01-doc')
  console.log('✓ mobile: no horizontal overflow, header stays pinned while scrolling')

  // --- the document surface itself, at 390px ---
  // The two symptoms this replaced: an 816px sheet in a 390px window put 68% of
  // every line off screen, and a 1in page margin spent 24.6% of the viewport
  // before the first letter. Both are measured here, not asserted by eye.
  const surface = () =>
    page.evaluate(() => {
      const ed = document.getElementById('editor')
      const t = document.querySelector('.tiptap')
      const col = document.getElementById('editor-col')
      const para = [...t.querySelectorAll('p')].find(e => e.textContent.trim().length > 120)
      const lh = para ? parseFloat(getComputedStyle(para).lineHeight) : 1
      const lines = para ? Math.max(1, Math.round(para.getBoundingClientRect().height / lh)) : 0
      return {
        sheet: Math.round(ed.getBoundingClientRect().width),
        pad: Math.round(parseFloat(getComputedStyle(ed).paddingLeft)),
        measure: Math.round(t.getBoundingClientRect().width),
        font: parseFloat(getComputedStyle(t).fontSize),
        line: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--doc-line')),
        titleFont: Math.round(parseFloat(getComputedStyle(t.querySelector('h1')).fontSize)),
        colScroll: col.scrollWidth - col.clientWidth,
        // the whole point: how much of a line a reader can actually see
        offScreen: Math.max(0, Math.round(ed.getBoundingClientRect().right - window.innerWidth)),
        charsPerLine: lines ? Math.round(para.textContent.trim().length / lines) : 0,
      }
    })

  const phone = await surface()
  assert.equal(phone.sheet, 390, `the sheet is the screen, edge to edge (${phone.sheet})`)
  assert.equal(phone.offScreen, 0, `no part of the page is off screen (${phone.offScreen}px)`)
  assert.equal(phone.colScroll, 0, `and there is nothing to scroll sideways to (${phone.colScroll}px)`)
  assert.ok(phone.pad >= 16 && phone.pad <= 34,
    `the margin is a phone margin, not a printed inch (${phone.pad}px = ${Math.round((phone.pad / 390) * 100)}% a side)`)
  assert.ok(phone.font >= 16, `body text is at least 16px, iOS and Android's own body size (${phone.font})`)
  assert.ok(phone.charsPerLine >= 32 && phone.charsPerLine <= 52,
    `a phone line, not a page line (${phone.charsPerLine} characters)`)
  // the Docs Title is 2.364em against a 624px column; at 354px that was 37.8px
  assert.ok(phone.titleFont < 34, `the display title is re-struck for the column (${phone.titleFont}px)`)
  console.log(`✓ mobile: the page reflows into the screen — ${phone.measure}px column, ${phone.font}px type, ${phone.charsPerLine} chars/line`)

  // No reflow jitter: the drawer and the comment sheet are position:fixed, so
  // revealing either one must not resize the column and re-break a line. This
  // was the real risk in making the sheet fluid — a sheet sized off a container
  // that panels can shrink would re-set the text every time one opened.
  const stable = []
  for (const [what, sel] of [['pages drawer', '#m-pages'], ['comment sheet', '#m-comments']]) {
    await page.click(sel)
    await page.waitForTimeout(400)
    stable.push([what, await surface()])
    await page.click(sel)
    await page.waitForTimeout(400)
  }
  for (const [what, open] of stable) {
    assert.equal(open.measure, phone.measure, `the ${what} does not re-break a line (${open.measure} vs ${phone.measure})`)
  }
  // typing must not move the column either
  await page.click('.tiptap', { position: { x: 40, y: 12 } })
  await page.keyboard.type('x')
  await page.waitForTimeout(300)
  const typed = await surface()
  assert.equal(typed.measure, phone.measure, `typing does not re-break the column (${typed.measure})`)
  await page.keyboard.press('Backspace')
  console.log('✓ mobile: opening the drawer, the sheet, or the keyboard reflows nothing')

  // zoom is now a type control here, not a fit control: the sheet is already the
  // screen, so ± only reaches the words — and its floor lifts, because 40% of a
  // fluid column is 6.4px of text and buys nothing
  await page.evaluate(() => { document.body.classList.add('fmt-open') })
  await page.waitForTimeout(200)
  for (let i = 0; i < 6; i++) await page.click('#zoom-out')
  await page.waitForTimeout(350)
  const zoomedOut = await surface()
  assert.equal(zoomedOut.sheet, phone.sheet, `zooming out does not narrow the sheet (${zoomedOut.sheet})`)
  assert.ok(zoomedOut.font >= 12.8,
    `the zoom floor is 80% here, so the type stays readable (${zoomedOut.font}px at ${await page.textContent('#zoom-label')})`)
  // back to 100% by the readout, not by counting clicks: the floor swallows the
  // extra ones, so six out and six in would land at 140%
  for (let i = 0; i < 12 && (await page.textContent('#zoom-label')) !== '100%'; i++) await page.click('#zoom-in')
  await page.waitForTimeout(350)
  assert.equal(await page.textContent('#zoom-label'), '100%', 'zoom back to 100% for the rest of the checks')
  await page.evaluate(() => { document.body.classList.remove('fmt-open') })
  console.log('✓ mobile: zoom sets the type instead of trying to fit a page that already fits')

  // the Reading style is measured against a 624px column (10.69 words a line);
  // on a phone it gets 354px and only its leading is allowed to give
  // the ⋯ sheet is a toggle, and the style button lives inside it — so open it
  // by its state rather than by clicking and hoping it was closed
  const moreOpen = () => page.evaluate(() => !document.getElementById('more-pop').classList.contains('hidden'))
  const openMore = async () => {
    if (!(await moreOpen())) await page.click('#m-more')
    await page.waitForSelector('#more-pop:not(.hidden)')
    await page.waitForTimeout(150)
  }
  // and put it back down afterwards: the header-chrome checks measure whether
  // the desktop buttons are visible, and on a phone they live inside this sheet
  const closeMore = async () => {
    if (await moreOpen()) await page.click('#m-more')
    await waitFor(async () => !(await moreOpen()), 'the ⋯ sheet is back down')
  }
  await openMore()
  await page.click('#docstyle-btn')
  await waitFor(async () => await page.evaluate(() => document.documentElement.dataset.docStyle === 'reading'), 'reading style on')
  await page.waitForTimeout(700)
  const reading = await surface()
  assert.equal(reading.measure, phone.measure, 'Reading gets the same phone column as Docs')
  assert.equal(reading.colScroll, 0, 'Reading does not overflow it either')
  assert.ok(reading.font >= 16, `Reading keeps the 16px base it was measured at (${reading.font})`)
  assert.ok(reading.line < 1.8 && reading.line >= 1.5,
    `only the leading gives: 1.8 was struck for a long line (${reading.line})`)
  assert.ok(reading.titleFont < 40, `the display serif headline is re-struck too (${reading.titleFont}px)`)
  await shot('02-reading')
  await openMore()
  await page.click('#docstyle-btn')
  await waitFor(async () => await page.evaluate(() => document.documentElement.dataset.docStyle === 'docs'), 'docs style back')
  await closeMore()
  console.log(`✓ mobile: Reading holds its 16px base and gives its leading instead (${reading.line})`)

  // desktop-only chrome is gone; phone controls are real 40px tap targets
  const targets = await page.evaluate(() => {
    const out = {}
    for (const sel of ['#m-pages', '#m-comments', '#m-fmt', '#m-more']) {
      const r = document.querySelector(sel).getBoundingClientRect()
      out[sel] = [Math.round(r.width), Math.round(r.height)]
    }
    out.shareVisible = document.getElementById('share-btn').getBoundingClientRect().height > 0
    out.edgeTabs = document.getElementById('sidebar-toggle').getBoundingClientRect().height > 0
    return out
  })
  assert.ok(!targets.shareVisible, 'desktop Share button hidden on phones (moved into ⋯)')
  assert.ok(!targets.edgeTabs, 'desktop edge tabs hidden on phones')
  for (const sel of ['#m-pages', '#m-comments', '#m-fmt', '#m-more']) {
    const [w, h] = targets[sel]
    assert.ok(w >= 40 && h >= 40, `${sel} is a 40px+ tap target (got ${w}x${h})`)
  }

  // ⋯ menu holds Share / Agents / identity and still works from there
  await page.click('#m-more')
  await page.waitForSelector('#more-pop:not(.hidden)')
  const inMenu = await page.evaluate(() => [...document.getElementById('more-pop').children].map(c => c.id))
  assert.ok(inMenu.includes('share-btn') && inMenu.includes('agents-btn') && inMenu.includes('whoami'), 'more menu: ' + inMenu)
  assert.ok(inMenu.includes('theme-btn'), 'the theme toggle rides the ⋯ sheet on a phone: ' + inMenu)
  await shot('02-more-menu')
  await page.click('#more-pop #share-btn')
  await page.waitForSelector('#share-pop:not(.hidden)')
  const pop = await page.evaluate(() => {
    const r = document.getElementById('share-pop').getBoundingClientRect()
    return { left: Math.round(r.left), right: Math.round(r.right), width: Math.round(r.width) }
  })
  assert.ok(pop.left >= 0 && pop.right <= 390 && pop.width > 300, 'share sheet fits the screen: ' + JSON.stringify(pop))
  await page.click('#m-more') // dismiss
  await page.waitForTimeout(200)
  console.log('✓ mobile: ⋯ menu carries Share/Agents/identity, popovers fit the screen')

  // formatting toolbar: hidden by default, revealed as a scrollable second row
  assert.ok(await page.evaluate(() => document.getElementById('header-tools').getBoundingClientRect().height === 0), 'toolbar collapsed by default')
  await page.click('#m-fmt')
  await page.waitForTimeout(300)
  const tools = await page.evaluate(() => {
    const t = document.getElementById('header-tools')
    const r = t.getBoundingClientRect()
    return { h: Math.round(r.height), top: Math.round(r.top), scrollable: t.scrollWidth > t.clientWidth + 10, hdr: document.getElementById('topbar').offsetHeight }
  })
  assert.ok(tools.h > 25 && tools.top < tools.hdr, 'formatting row shows inside the header: ' + JSON.stringify(tools))
  assert.ok(tools.scrollable, 'formatting row scrolls horizontally instead of squeezing')
  await shot('03-fmt-row')
  // and it actually formats
  await selectText(page, 'quick brown fox')
  await page.evaluate(() => [...document.querySelectorAll('#header-tools button')].find(b => b.textContent === 'B')?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
  await waitFor(async () => await page.evaluate(() => window.__editor.isActive('bold')), 'bold applied from the phone toolbar')
  await page.evaluate(() => [...document.querySelectorAll('#header-tools button')].find(b => b.textContent === 'B')?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })))
  await page.click('#m-fmt')
  await page.waitForTimeout(200)
  console.log('✓ mobile: formatting row toggles, scrolls and applies marks')

  // pages drawer: scrim, dismiss, and closing itself when a page is chosen
  await page.click('#m-pages')
  await page.waitForTimeout(350)
  const drawer = await page.evaluate(() => {
    const s = document.getElementById('sidebar').getBoundingClientRect()
    return {
      onScreen: s.left >= 0 && s.width > 200,
      belowHeader: Math.round(s.top) >= document.getElementById('topbar').offsetHeight,
      scrim: !document.getElementById('scrim').classList.contains('hidden'),
    }
  })
  assert.ok(drawer.onScreen && drawer.belowHeader && drawer.scrim, 'drawer slides over with a scrim: ' + JSON.stringify(drawer))
  await shot('04-drawer')
  // tap the exposed part of the scrim, to the right of the 300px drawer
  await page.mouse.click(360, 620)
  await waitFor(async () => await page.evaluate(() => document.getElementById('sidebar').classList.contains('hidden')), 'scrim dismisses the drawer')
  await page.click('#m-pages')
  await page.waitForTimeout(300)
  await page.click('#page-tree a:not(.current):not(.pending-page)') // a real page, not a proposal
  await waitFor(async () => await page.evaluate(() => document.getElementById('sidebar').classList.contains('hidden')), 'drawer closes after picking a page')
  await page.waitForSelector('.tiptap')
  await page.waitForTimeout(600)
  console.log('✓ mobile: pages drawer — scrim dismiss + closes on navigation')

  // comments bottom sheet: closed by default, badge shows the count, cards land
  // on screen (they used to stack below the whole document, out of sight)
  await page.goto(`${BASE}${docPath}`)
  await page.waitForSelector('.tiptap')
  await waitFor(async () => (await page.$$('.card')).length >= 1, 'cards back on the main page')
  await page.waitForTimeout(700)
  assert.ok(await page.evaluate(() => document.getElementById('margin-col').classList.contains('hidden')), 'sheet starts closed')
  const badge = await page.evaluate(() => {
    const b = document.querySelector('#m-comments .count')
    return { text: b.textContent, shown: !b.classList.contains('hidden') }
  })
  assert.ok(badge.shown && Number(badge.text) > 0, 'comment count badge: ' + JSON.stringify(badge))
  await page.click('#m-comments')
  await page.waitForTimeout(500)
  const sheet = await page.evaluate(() => {
    const r = document.getElementById('margin-col').getBoundingClientRect()
    const cards = [...document.querySelectorAll('.card')]
    return {
      box: [Math.round(r.left), Math.round(r.top), Math.round(r.width), Math.round(r.bottom)],
      vh: window.innerHeight,
      visibleCards: cards.filter(c => { const b = c.getBoundingClientRect(); return b.top < window.innerHeight && b.bottom > 0 }).length,
      minHeightGap: document.getElementById('margin-items').style.minHeight,
    }
  })
  assert.ok(sheet.box[3] >= sheet.vh - 1 && sheet.box[1] > 0, 'sheet is anchored to the bottom edge: ' + JSON.stringify(sheet))
  assert.ok(sheet.box[2] === 390, 'sheet spans the width')
  assert.ok(sheet.visibleCards >= 1, 'cards are visible inside the sheet')
  assert.ok(!sheet.minHeightGap, 'no leftover desktop min-height gap')
  await shot('05-comments-sheet')
  console.log('✓ mobile: comments open as a bottom sheet with the cards on screen')

  // tapping a comment highlight in the text opens the sheet on that card
  await page.click('#margin-close')
  await waitFor(async () => await page.evaluate(() => document.getElementById('margin-col').classList.contains('hidden')), 'sheet closes')
  // a real tap: the reveal runs through ProseMirror's click handling
  await page.evaluate(() => document.querySelector('.tiptap .comment-hl, .tiptap .sugg-ins')?.scrollIntoView({ block: 'center' }))
  await page.waitForTimeout(400)
  const hl = await page.locator('.tiptap .comment-hl, .tiptap .sugg-ins').first().boundingBox()
  await page.mouse.click(hl.x + hl.width / 2, hl.y + hl.height / 2)
  await page.waitForTimeout(600)
  const revealed = await page.evaluate(() => ({
    open: !document.getElementById('margin-col').classList.contains('hidden'),
    expanded: !!document.querySelector('.card.expanded'),
  }))
  assert.ok(revealed.open, 'tapping highlighted text opens the sheet')
  console.log('✓ mobile: tapping highlighted text opens the sheet' + (revealed.expanded ? ' on that card' : ''))

  // selection -> Comment must open the composer inside the sheet
  await page.click('#margin-close').catch(() => {})
  await page.waitForTimeout(200)
  await selectText(page, 'lazy dog')
  await page.waitForSelector('#selection-menu:not(.hidden)')
  const menuBtn = await page.evaluate(() => {
    const r = document.getElementById('comment-btn').getBoundingClientRect()
    return [Math.round(r.width), Math.round(r.height)]
  })
  assert.ok(menuBtn[1] >= 40, `selection menu buttons are touch-sized (${menuBtn})`)
  await page.click('#comment-btn')
  await page.waitForSelector('#composer:not(.hidden)')
  await page.waitForTimeout(500) // the sheet slides up
  const composer = await page.evaluate(() => {
    const r = document.getElementById('composer').getBoundingClientRect()
    return {
      sheetOpen: !document.getElementById('margin-col').classList.contains('hidden'),
      rect: [Math.round(r.top), Math.round(r.bottom), Math.round(r.width)],
      vh: window.innerHeight,
      scrollTop: document.getElementById('margin-items').scrollTop,
      onScreen: r.top < window.innerHeight && r.bottom > 0 && r.width > 100,
      fontSize: getComputedStyle(document.getElementById('composer-text')).fontSize,
    }
  })
  assert.ok(composer.sheetOpen, 'commenting opens the sheet holding the composer')
  assert.ok(composer.onScreen, 'composer is on screen: ' + JSON.stringify(composer))
  assert.equal(composer.fontSize, '16px', 'inputs are 16px so iOS does not zoom on focus')
  await shot('06-composer')
  await page.fill('#composer-text', 'from a phone')
  await page.click('#composer-send')
  await waitFor(async () => (await page.textContent('#margin-items')).includes('from a phone'), 'phone comment posted')
  console.log('✓ mobile: selection → comment posts from the sheet, inputs are zoom-safe')

  // long agent replies are clamped with a Show more toggle
  await page.evaluate(() => {
    const long = 'A very long agent reply that should not be allowed to run on forever. '.repeat(40)
    const thread = [...window.__ydoc.getMap('threads').values()].find(t => t.get('messages'))
    thread.get('messages').push([{ id: 'long1', author: 'ui-agent', authorType: 'agent', text: long, ts: Date.now() }])
  })
  await page.waitForTimeout(600)
  await page.evaluate(() => {
    const card = [...document.querySelectorAll('.card.thread')].find(c => c.textContent.includes('long agent reply')) || document.querySelector('.card.thread')
    card?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
  })
  await waitFor(async () => !!(await page.$('.card.expanded .more-btn')), 'clamped long comment offers Show more')
  const clamp = await page.evaluate(() => {
    const el = [...document.querySelectorAll('.card.expanded .msg .text')].find(n => n.textContent.includes('run on forever'))
    return { clamped: el.classList.contains('clamped'), shown: Math.round(el.getBoundingClientRect().height), full: el.scrollHeight }
  })
  assert.ok(clamp.clamped && clamp.shown < clamp.full / 2, 'long comment is clamped: ' + JSON.stringify(clamp))
  await shot('07-long-comment')
  await page.click('.card.expanded .more-btn')
  await page.waitForTimeout(300)
  const expandedText = await page.evaluate(() => {
    const el = [...document.querySelectorAll('.card.expanded .msg .text')].find(n => n.textContent.includes('run on forever'))
    return { clamped: el.classList.contains('clamped'), shown: Math.round(el.getBoundingClientRect().height), label: document.querySelector('.card.expanded .more-btn').textContent }
  })
  assert.ok(!expandedText.clamped && expandedText.shown > clamp.shown, 'Show more reveals the rest: ' + JSON.stringify(expandedText))
  assert.equal(expandedText.label, 'Show less', 'toggle flips to Show less')
  console.log('✓ mobile: long comments clamp to a max height with Show more / Show less')

  await browser.close()
}

async function selectText(page, needle) {
  await page.evaluate(text => {
    const editor = window.__editor
    let found = null
    editor.state.doc.descendants((node, pos) => {
      if (found || !node.isText) return
      const idx = node.text.indexOf(text)
      if (idx !== -1) found = { from: pos + idx, to: pos + idx + text.length }
    })
    if (!found) throw new Error('text not found: ' + text)
    editor.chain().focus().setTextSelection(found).run()
  }, needle)
  await page.waitForTimeout(250)
}

async function waitFor(fn, what, ms = 8000) {
  const t0 = Date.now()
  while (Date.now() - t0 < ms) {
    try {
      if (await fn()) return
    } catch {}
    await new Promise(r => setTimeout(r, 150))
  }
  throw new Error('timeout: ' + what)
}

main().catch(async err => {
  console.error('\nBROWSER TEST FAILED:', err.message)
  console.error('console errors:', consoleErrors)
  server.kill()
  process.exit(1)
})