// 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 })
  page.once('dialog', d => d.accept('Browser Test Doc'))
  await page.click('#new-doc')
  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')
  // resolve it: later assertions count the open threads on this document
  await page.click('.card.thread.expanded .resolve-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')

  // --- select text: the comment box opens itself in the margin, no widget ---
  await selectText(page, 'quick brown fox')
  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 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 })
  console.log('✓ comment card created: chip + text highlight 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')
  // resolve 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 .resolve-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')
  page.on('dialog', d => {
    console.log('[dialog]', d.message())
    d.dismiss().catch(() => {})
  })
  // 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')

  // resolved 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('✓ resolved 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 })
  const dialogs = []
  // an earlier handler in this suite already dismisses dialogs — only record here
  const onDialog = d => dialogs.push(d.message())
  page.on('dialog', onDialog)
  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.waitForTimeout(800)
  assert.ok(dialogs.some(m => /not connected/i.test(m)), 'accepting offline warns instead of silently failing: ' + JSON.stringify(dialogs))
  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')
  page.off('dialog', onDialog)
  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')

  // --- 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')

  // --- 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')

  // 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 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')
  console.log('✓ new-page suggestion: pending → preview → accept creates the page')

  // 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')

  // 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 ›')

  // suggestion attached to a comment thread: strip with working accept
  assert.ok(await page.$('.card.thread .sugg-strip'), 'suggestion renders as a strip inside its comment card')
  await page.click('.sugg-strip .accept-btn')
  await waitFor(async () => (await page.textContent('.tiptap')).includes('go break things'), 'strip accept applies')
  console.log('✓ comment-attached suggestion strip (accept works collapsed)')

  // comment resolvable without opening the card
  assert.ok(await page.$('.card.thread .resolve-btn'), 'collapsed thread has a resolve button')
  await page.click('.card.thread .resolve-btn')
  await waitFor(async () => !(await page.$('.card.thread:not(.expanded) .resolve-btn')), 'thread resolved from collapsed head')
  console.log('✓ comment resolve 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)')

  // structure link: icon + capitalized
  const stLink = await page.evaluate(() => ({
    text: document.getElementById('structure-link').textContent.trim(),
    hasIcon: !!document.querySelector('#structure-link svg'),
  }))
  assert.deepEqual(stLink, { text: 'Structure', hasIcon: true }, 'structure link polished: ' + JSON.stringify(stLink))

  // [[ 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')

  // 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
  await page.evaluate(() => (window.confirm = () => true))
  await page.click('#reset-btn')
  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 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')

  // 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)')
  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)
})