@things-factory/figure-ui 10.1.146 → 10.1.149

package/test/browser/product-page.check.mjs

@@ -0,0 +1,682 @@
+/*
+ * The modeller page itself (`figure-modeller-page`) in a real browser, over a server in memory (product-page.js): what
+ * the page does with its editor, its properties, its history panel and the AI dock's door, read as a person or the
+ * shell would see it -- a field, a notice, a popup, an address, a request sent.
+ *
+ * No translations are loaded: a text is its key, with the values put into it after it (product-page.js).
+ *
+ * Run:  node --test test/browser/product-page.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const STAND_INS = {
+  '@things-factory/ai-assistant/dist-client/index.js': 'assistant-stand-in.js',
+  '@things-factory/ai-assistant/dist-client/components/assistant-dock.js': 'assistant-stand-in.js'
+}
+const K1 = '11111111-1111-4111-8111-111111111111'
+const K2 = '22222222-2222-4222-8222-222222222222'
+const LID = [{ kind: 'add-part', part: { id: 'lid', kind: 'box', dimensions: { width: 100, height: 10, depth: 100 } } }]
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('product-page.js', { standIns: STAND_INS }))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+/** Waits for a condition in the page (no fixed sleep): its value once truthy. */
+async function until(fn, label, ...args) {
+  try {
+    return await (await page().waitForFunction(fn, { timeout: 15000, polling: 50 }, ...args)).jsonValue()
+  } catch (error) {
+    throw Error(`waited in vain: ${label} (${error.message})`)
+  }
+}
+/** A fresh page: nothing seeded, nothing asked, nothing open. */
+async function fresh() {
+  /* Taken down first: a page with unsaved edits holds a reload with the browser's own question. */
+  await read(() => document.querySelector('figure-modeller-page')?.remove())
+  await page().reload()
+  await page().waitForFunction(() => !!window.product, { timeout: 30000 })
+}
+/** The page made active on an address, and the figure on it read. */
+async function open(id) {
+  await read(id => product.open(id ?? undefined), id ?? null)
+  await until(() => { const v = product.view(); return v && v.context && !product.page().session.read().loading }, `figure ${id ?? 'new'} open`)
+}
+/** Clicks the first element the selector finds anywhere on the page, through shadow roots. */
+async function press(selector, label = selector) {
+  await until(s => { const e = product.deep(s)[0]; return !!e && !e.disabled }, `${label} to press`, selector)
+  await read(s => product.deep(s)[0].click(), selector)
+}
+/** A field of the properties tab changed by the author: its value set and the change told. */
+async function change(selector, value) {
+  await until(s => !!product.deep(s)[0], selector, selector)
+  await read((s, v) => { const input = product.deep(s)[0]; input.value = v; input.dispatchEvent(new Event('change', { bubbles: true })) }, selector, value)
+}
+const rename = name => change('figure-properties >>> div[field] input', name)
+const fields = () => read(() => product.calls().map(c => c.field))
+const callsTo = field => read(f => product.calls().filter(c => c.field === f).map(c => c.variables), field)
+const notices = () => read(() => product.notices())
+const releaseState = () => read(() => product.deep('[release-state]')[0]?.textContent.trim())
+
+describe('a save whose answer never came back', () => {
+  before(async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'a', type: 'agv', source: product.boxSource('A') }))
+    await open('a')
+  })
+
+  /* The save goes through `reached`, and the store reads every field it wrote back from the server. */
+  test('written, its answer lost: read back from the server, it is saved -- no notice, nothing left unsaved', async () => {
+    await rename('B')
+    await read(() => product.answer('saveFigure', v => {
+      product.server('saveFigure', v)
+      throw Object.assign(Error('lost'), { networkError: {} })
+    }))
+    await press('button[save]', 'save')
+    await until(() => !product.view().dirty, 'the save read back as saved')
+    assert.deepEqual(await notices(), [])
+    assert.equal(JSON.parse((await read(() => product.rows()))[0].source).name, 'B')
+  })
+
+  test('not written and not readable back: said as not known, and the edits stay', async () => {
+    await read(() => product.forget())
+    await rename('C')
+    await read(() => {
+      const lost = () => { throw Object.assign(Error('lost'), { networkError: {} }) }
+      product.answer('saveFigure', lost)
+      product.answer('figure', lost)
+    })
+    await press('button[save]', 'save')
+    const said = await until(() => product.notices().find(n => n.level === 'error'), 'a notice')
+    assert.equal(said.message, 'figure.text.save-unreachable')
+    assert.equal((await read(() => product.view())).dirty, true)
+  })
+})
+
+describe('a released figure the server makes a draft again', () => {
+  before(async () => {
+    await fresh()
+    await read(() => {
+      product.seed({ id: 'r', type: 'agv', state: 'released', version: 2, source: product.boxSource('R') })
+      product.seed({ id: 'c', type: 'oht', state: 'released', version: 1, source: product.boxSource('C') })
+      product.seed({ id: 'n', type: 'stk', state: 'draft', version: 0, source: product.boxSource('N') })
+      product.seed({ id: 'o', type: 'lft', state: 'draft', version: 3, source: product.boxSource('O') })
+    })
+  })
+
+  test('beside the save: what the saved figure is, as the row on the server says', async () => {
+    await open('n')
+    await until(() => product.deep('[release-state]')[0]?.textContent.trim(), 'the release state')
+    assert.equal(await releaseState(), 'figure.text.release-state-draft-new')
+    await open('o')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('draft-over'), 'the release state of o')
+    assert.equal(await releaseState(), 'figure.text.release-state-draft-over {"version":"3"}')
+  })
+
+  test('its source saved: told once, and the state beside the save follows', async () => {
+    await open('r')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('released'), 'released')
+    assert.equal(await releaseState(), 'figure.text.release-state-released {"version":"2"}')
+    await read(() => product.forget())
+    await rename('R2')
+    await press('button[save]', 'save')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('draft-over'), 'the state follows')
+    assert.deepEqual(await notices(), [{ level: 'info', message: 'figure.text.released-now-draft' }])
+    assert.equal(await releaseState(), 'figure.text.release-state-draft-over {"version":"2"}')
+  })
+
+  test('its category changed: written to the row at once, told, and the state follows', async () => {
+    await open('c')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('released'), 'released')
+    await read(() => {
+      product.forget()
+      product.answer('updateFigure', v => {
+        const answer = product.server('updateFigure', v)
+        answer.figure.state = 'draft'
+        return answer
+      })
+    })
+    const before = await read(() => product.view())
+    await change('figure-properties >>> input[placeholder="figure.text.category-placeholder"]', 'conveyors')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('draft-over'), 'the state follows')
+    assert.deepEqual(await callsTo('updateFigure'), [{ id: 'c', patch: { category: 'conveyors' } }])
+    assert.deepEqual(await notices(), [{ level: 'info', message: 'figure.text.released-now-draft' }])
+    const now = await read(() => product.view())
+    assert.equal(now.source, before.source, 'the row, not the figure')
+    assert.equal(now.dirty, false)
+  })
+})
+
+describe('the first save of a new figure', () => {
+  before(async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'old', type: 'taken-one', source: product.boxSource('Old') }))
+    await open(null)
+  })
+  const firstSave = () =>
+    read(() => {
+      const popup = product.deep('figure-first-save')[0]
+      if (!popup) return null
+      let active = document.activeElement
+      while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement
+      return { first: popup.shadowRoot.querySelector('input')?.id, type: popup.shadowRoot.querySelector('#type').value, focused: active?.id }
+    })
+
+  test('before it is saved: the type can be written, held by the page, and the release waits', async () => {
+    const field = await read(() => { const input = product.page().shadowRoot.querySelector('label[type-field] input'); return input && { disabled: input.disabled } })
+    assert.deepEqual(field, { disabled: false })
+    assert.equal(await read(() => product.deep('button[publish]')[0].disabled), true, 'nothing to release before the first save')
+    await read(() => product.forget())
+    await change('figure-modeller-page >>> label[type-field] input', 'agv lifter')
+    assert.equal(await read(() => product.page().shadowRoot.querySelector('label[type-field] input').value), 'agv-lifter')
+    assert.equal((await fields()).includes('updateFigure'), false, 'no row to write yet')
+  })
+
+  test('the question asks the name first, focused, with the type written before', async () => {
+    await press('button[save]', 'save')
+    await until(() => product.deep('figure-first-save')[0]?.shadowRoot.querySelector('#type'), 'the first save asked')
+    await until(() => { let a = document.activeElement; while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement; return a?.id === 'name' }, 'the name focused')
+    assert.deepEqual(await firstSave(), { first: 'name', type: 'agv-lifter', focused: 'name' })
+  })
+
+  test('a first save refused opens again on the identifier answered; typing a name does not change it', async () => {
+    await read(() => {
+      const type = product.deep('figure-first-save')[0].shadowRoot.querySelector('#type')
+      type.value = 'my lift'
+      type.dispatchEvent(new Event('input'))
+      product.answer('saveFigure', () => {
+        product.answer('saveFigure')
+        throw Object.assign(Error('refused'), { graphQLErrors: [{ message: 'refused', extensions: { code: 'FORBIDDEN' } }] })
+      })
+    })
+    await read(() => product.deep('figure-first-save')[0].shadowRoot.querySelector('md-filled-button[slot=confirm]').click())
+    await until(() => product.notices().some(n => n.level === 'error'), 'the refusal said')
+    await until(() => !product.deep('figure-first-save').length, 'the question closed')
+    await press('button[save]', 'save')
+    await until(() => product.deep('figure-first-save')[0]?.shadowRoot.querySelector('#type'), 'asked again')
+    assert.equal((await firstSave()).type, 'my-lift')
+    await read(() => {
+      const name = product.deep('figure-first-save >>> #name')[0]
+      name.focus()
+      name.select()
+    })
+    await page().keyboard.type('Lift table')
+    await until(() => product.deep('figure-first-save')[0].shadowRoot.querySelector('#name').value === 'Lift table', 'the name typed')
+    assert.equal((await firstSave()).type, 'my-lift', 'the name typed: the identifier stays')
+  })
+
+  test("saved: the address becomes the figure's own in place of the entry; the bare address opens a new figure", async () => {
+    const entries = await read(() => history.length)
+    await read(() => product.forget())
+    await read(() => product.deep('figure-first-save')[0].shadowRoot.querySelector('md-filled-button[slot=confirm]').click())
+    const id = await until(() => product.view().id, 'saved')
+    assert.equal((await callsTo('saveFigure'))[0].type, 'my-lift')
+    const navigations = await until(() => product.navigations().length && product.navigations(), 'the address changed')
+    assert.deepEqual(navigations, [{ path: `/figure-modeller/${id}`, entries, detailShown: false }])
+    await until(() => !product.deep('button[publish]')[0].disabled, 'the release open')
+    assert.equal((await read(() => product.view())).id, id, 'the page stays on it')
+    await open(null)
+    assert.equal((await read(() => product.view())).id, undefined, 'the modeller from the menu: a new figure')
+  })
+})
+
+describe('opening another figure', () => {
+  before(async () => {
+    await fresh()
+    await read(() => {
+      product.seed({ id: 'a', type: 'type-a', source: product.boxSource('A') })
+      product.seed({ id: 'b', type: 'type-b', source: product.boxSource('B') })
+    })
+  })
+
+  test('the row is emptied first: the type of the one before does not stand while the next one loads', async () => {
+    const typeField = () => read(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value)
+    await open('a')
+    await until(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value === 'type-a', 'a\'s type')
+    /* Only b's first read is held: the figure itself. */
+    await read(() =>
+      product.answer('figure', v => {
+        if (v.id !== 'b') return product.server('figure', v)
+        product.answer('figure')
+        return new Promise(done => (window.letB = () => done(product.server('figure', v))))
+      })
+    )
+    await read(() => product.open('b'))
+    await until(() => !!window.letB, 'b asked for')
+    await read(() => product.page().updateComplete)
+    assert.equal(await typeField(), '')
+    await read(() => window.letB())
+    await until(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value === 'type-b', 'b\'s type')
+  })
+})
+
+const PANEL = 'figure-modeller-page >>> figure-history-panel'
+const TAB = name => `figure-editor >>> button[tab][aria-label="figure.label.tab-short-${name}"]`
+const VERSION_1 = { version: 1, comment: 'first', state: 'released', updatedAt: null, updater: null, score: null, triangles: null, groups: null }
+/** The revert choice popup's buttons: keep editing, let the edits go, save them first. */
+const CHOICE = { cancel: 'figure-revert-choice >>> md-text-button[slot=cancel]', discard: 'figure-revert-choice >>> md-text-button[slot=start]', save: 'figure-revert-choice >>> md-filled-button[slot=confirm]' }
+const choiceShown = () => until(() => product.deep('figure-revert-choice >>> p')[0]?.textContent.trim(), 'the revert choice')
+const choiceGone = () => until(() => !product.deep('figure-revert-choice').length, 'the revert choice closed')
+const failure = panel => read(p => product.deep(`${p} >>> p[failed]`)[0]?.textContent.trim(), panel)
+
+describe('the history panel on the page', () => {
+  before(async () => {
+    await fresh()
+    await read(VERSION_1 => {
+      product.seed({ id: 'h', type: 'agv', namespace: 'acme', state: 'draft', version: 1, source: product.boxSource('H') })
+      product.answer('figureVersions', () => [VERSION_1])
+      product.answer('inspectFigure', () => ({
+        blocked: true,
+        findings: ['occupancy-undeclared', 'part-outside-occupancy', 'type-is-placeholder'].map(code => ({ code, message: code, why: null, how: null, at: null, blocking: true }))
+      }))
+    }, VERSION_1)
+    await open('h')
+  })
+
+  test('the release beside the save leads to the release section of the history tab', async () => {
+    await press('button[publish]', 'release')
+    await until(p => product.deep(p)[0]?.shadowRoot.activeElement?.closest('section[release]'), 'the release section focused', PANEL)
+    const panel = await read(p => { const panel = product.deep(p)[0]; return { slot: panel.assignedSlot?.name, visible: panel.checkVisibility() } }, PANEL)
+    assert.deepEqual(panel, { slot: 'history', visible: true })
+    assert.equal(await read(() => product.deep('figure-editor >>> button[tab][on]')[0]?.getAttribute('aria-label')), 'figure.label.tab-short-history')
+  })
+
+  test('a released version downloads as a package by its full reference', async () => {
+    const link = await until(p => { const a = product.deep(`${p} >>> li a[package]`)[0]; return a && { href: a.getAttribute('href'), download: a.hasAttribute('download') } }, 'the package link', PANEL)
+    assert.deepEqual(link, { href: '/figure-package?refs=acme%2Fagv%401', download: true })
+  })
+
+  test('fitting to the parts is offered for the two findings it answers, and declares the room as one step', async () => {
+    const offered = await until(p => { const found = product.deep(`${p} >>> li[finding]`); return found.length === 3 && found.filter(li => li.querySelector('button[fit-base]')).map(li => li.querySelector('[msg]').textContent).sort() }, 'the findings', PANEL)
+    assert.deepEqual(offered, ['occupancy-undeclared', 'part-outside-occupancy'])
+    const before = await read(() => product.view())
+    await press(`${PANEL} >>> button[fit-base]`, 'fit')
+    await until(r => product.view().revision === r + 1, 'one step', before.revision)
+    await press(TAB('properties'), 'the properties tab')
+    await until(() => product.deep('figure-properties >>> div[row] > span')[0]?.textContent === 'figure.text.declared-space-declared', 'the room declared')
+    await press(TAB('history'), 'the history tab')
+  })
+
+  test('with edits not saved, a revert asks first; kept editing, nothing is sent', async () => {
+    assert.equal((await read(() => product.view())).dirty, true)
+    await read(() => product.forget())
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1')
+    assert.equal(await choiceShown(), 'figure.text.revert-with-unsaved {"version":"1"}')
+    assert.equal(await read(s => product.deep(s)[0].hasAttribute('destructive'), CHOICE.discard), true, 'letting the edits go is marked as what it is')
+    await press(CHOICE.cancel, 'keep editing')
+    await choiceGone()
+    assert.equal((await fields()).includes('revertFigureVersion'), false)
+    assert.equal(await failure(PANEL), undefined)
+  })
+
+  test('a save first that is refused, or not known, holds the revert', async () => {
+    await read(() => {
+      product.forget()
+      product.answer('saveFigure', () => {
+        throw Object.assign(Error('refused'), { graphQLErrors: [{ message: 'refused', extensions: { code: 'FORBIDDEN' } }] })
+      })
+    })
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1')
+    await choiceShown()
+    await press(CHOICE.save, 'save first')
+    const held = await until(p => product.deep(`${p} >>> p[failed]`)[0]?.textContent.trim(), 'the revert held', PANEL)
+    assert.equal(held, 'figure.text.revert-held-unsaved {"reason":"refused"}')
+    await read(() => {
+      const lost = () => { throw Object.assign(Error('lost'), { networkError: {} }) }
+      product.answer('saveFigure', lost)
+      product.answer('figure', lost)
+    })
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1')
+    await choiceShown()
+    await press(CHOICE.save, 'save first')
+    await until(p => product.deep(`${p} >>> p[failed]`)[0]?.textContent.includes('save-unreachable'), 'not known', PANEL)
+    assert.equal(await failure(PANEL), 'figure.text.revert-held-unsaved {"reason":"figure.text.save-unreachable"}')
+    assert.equal((await fields()).includes('revertFigureVersion'), false)
+    assert.equal((await read(() => product.view())).dirty, true, 'the edits stay')
+    await read(() => {
+      product.answer('saveFigure')
+      product.answer('figure')
+    })
+  })
+
+  test('edits let go: the revert expects what the server holds, and an answer lost is asked again with the same request', async () => {
+    await read(() => {
+      product.forget()
+      product.answer('revertFigureVersion', () => { throw Object.assign(Error('lost'), { networkError: {} }) })
+    })
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1')
+    await choiceShown()
+    await press(CHOICE.discard, 'let the edits go')
+    await until(p => product.deep(`${p} >>> p[failed]`)[0]?.textContent.trim() === 'figure.text.revert-unconfirmed', 'not known whether it was reverted', PANEL)
+    const [first] = await callsTo('revertFigureVersion')
+    const held = (await read(() => product.rows())).find(r => r.id === 'h').source
+    assert.deepEqual({ ...first, requestId: typeof first.requestId }, { id: 'h', version: 1, requestId: 'string', expectedSource: held })
+    assert.notEqual(first.expectedSource, (await read(() => product.view())).source, 'not the edits on screen')
+
+    await read(() => {
+      product.answer('revertFigureVersion', v => {
+        product.seed({ ...product.rows().find(r => r.id === v.id), source: product.boxSource('Released v1') })
+        const kept = { id: 'k1', kind: 'revert', state: 'draft', version: 1, revertedToVersion: v.version, restoredAt: null, createdAt: null, creator: null }
+        product.answer('figureReplacedDrafts', () => [kept])
+        return { figure: product.server('figure', { id: v.id }), violations: [], kept }
+      })
+    })
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1 again')
+    await choiceShown()
+    await press(CHOICE.discard, 'let the edits go')
+    await until(() => product.view().name === 'Released v1' && !product.view().dirty, 'the figure reopened as reverted')
+    const [, again] = await callsTo('revertFigureVersion')
+    assert.equal(again.requestId, first.requestId, 'the same revert, asked again')
+  })
+
+  test('the draft a revert wrote over is listed apart from the releases, and can be taken back', async () => {
+    const lists = await until(p => {
+      const kept = product.deep(`${p} >>> section[kept] li`)
+      return kept.length && { kept: kept.length, undo: kept.filter(li => li.querySelector('button[undo]')).length, released: product.deep(`${p} >>> section:not([kept]):not([release]) li`).length }
+    }, 'the kept list', PANEL)
+    assert.deepEqual(lists, { kept: 1, undo: 1, released: 1 })
+  })
+
+  test('edits saved first: the revert expects what that save wrote', async () => {
+    await rename('Edited')
+    await read(() => {
+      product.forget()
+      product.answer('inspectFigure', () => ({ blocked: false, findings: [] }))
+    })
+    await press(`${PANEL} >>> li button[revert]:not([undo])`, 'revert v1')
+    await choiceShown()
+    await press(CHOICE.save, 'save first')
+    await until(() => product.calls().some(c => c.field === 'revertFigureVersion'), 'the revert sent')
+    const sent = await fields()
+    assert.ok(sent.indexOf('saveFigure') >= 0 && sent.indexOf('saveFigure') < sent.indexOf('revertFigureVersion'), sent.join(' '))
+    const [saved] = await callsTo('saveFigure')
+    const [reverted] = await callsTo('revertFigureVersion')
+    assert.equal(JSON.parse(saved.source).name, 'Edited')
+    assert.equal(reverted.expectedSource, saved.source)
+    await until(() => !product.view().dirty, 'reopened')
+  })
+
+  test('released from the panel: the state beside the save follows, and the locked type stays', async () => {
+    await press(`${PANEL} >>> button[release]`, 'release')
+    await until(() => product.deep('[release-state]')[0]?.textContent.includes('released'), 'released')
+    assert.equal(await releaseState(), 'figure.text.release-state-released {"version":"2"}')
+    assert.equal(await read(() => product.page().shadowRoot.querySelector('label[type-field] code')?.textContent), 'agv')
+  })
+
+  test('taking a revert back with edits not saved asks too, in its own words', async () => {
+    await rename('Edited again')
+    await read(() => product.forget())
+    await press(`${PANEL} >>> section[kept] button[undo]`, 'undo the revert')
+    assert.equal(await choiceShown(), 'figure.text.undo-revert-with-unsaved')
+    await press(CHOICE.cancel, 'keep editing')
+    await choiceGone()
+    assert.equal((await fields()).includes('undoFigureRevert'), false)
+  })
+})
+
+describe('a history panel of its own', () => {
+  before(async () => {
+    await fresh()
+    await read(VERSION_1 => product.answer('figureVersions', () => [VERSION_1]), VERSION_1)
+  })
+  const ALONE = 'figure-history-panel[alone]'
+  const kept = (id, restoredAt = null) => ({ id, kind: 'revert', state: 'draft', version: 1, revertedToVersion: 1, restoredAt, createdAt: null, creator: null })
+
+  test('nothing confirmed on the server: not reverted, and said so', async () => {
+    await read(() => product.panel({ figureId: 'p', figureState: 'draft', figureVersion: 1, dirty: false, serverSource: () => undefined, saveFirst: async () => ({ ok: true }) }))
+    await press(`${ALONE} >>> li button[revert]`, 'revert v1')
+    await press('ox-prompt >>> #confirm', 'confirm the revert')
+    await until(p => product.deep(`${p} >>> p[failed]`)[0], 'the failure', ALONE)
+    assert.equal(await failure(ALONE), 'figure.text.revert-needs-server-source')
+    assert.equal((await fields()).includes('revertFigureVersion'), false)
+  })
+
+  test('only the newest kept draft not yet brought back is offered', async () => {
+    const offers = async drafts => {
+      await read(drafts => {
+        product.answer('figureReplacedDrafts', () => drafts)
+        return product.panel({ figureId: 'p', figureState: 'draft', figureVersion: 1, dirty: false, serverSource: () => 'x' })
+      }, drafts)
+      return until(p => { const items = product.deep(`${p} >>> section[kept] li`); return items.length === 2 && items.map(li => !!li.querySelector('button[undo]')) }, 'the kept list', ALONE)
+    }
+    assert.deepEqual(await offers([kept('k2'), kept('k1')]), [true, false])
+    assert.deepEqual(await offers([kept('k2', '2026-10-01T00:00:00Z'), kept('k1')]), [false, false])
+  })
+})
+
+/** The part's row in the parts list clicked, as the author picks it. */
+const pick = part => read(part => [...product.deep('figure-editor >>> figure-parts >>> li')].find(li => li.textContent.includes(part)).click(), part)
+const beforeUnload = () => read(() => { const e = new Event('beforeunload', { cancelable: true }); window.dispatchEvent(e); return e.defaultPrevented })
+const properties = () => read(() => { const p = product.deep('figure-modeller-page >>> figure-properties')[0]; return { slot: p.assignedSlot?.name ?? null, visible: p.checkVisibility() } })
+const hostContext = () => read(() => { const { figureId, draftSource, context, revision, selection, trying } = assistant.surface.hostContext(); return { figureId, name: draftSource.name, context, revision, selection, trying } })
+const said = () => read(() => assistant.said())
+async function undo() {
+  await read(() => document.activeElement?.blur())
+  await page().keyboard.down('Control')
+  await page().keyboard.press('z')
+  await page().keyboard.up('Control')
+}
+
+describe('the page around the figure: the shell, the dock, the properties', () => {
+  before(async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'd', type: 'door', source: product.doorSource() }))
+    await open('d')
+  })
+
+  test('a saved figure: the rail marks the catalogue, and the dock is given a surface anchored on its row', async () => {
+    assert.deepEqual(await read(() => product.context()), { title: 'Door', menu: 'figure-list' })
+    assert.deepEqual((await said()).filter(s => s.call === 'provide'), [{ call: 'provide', key: 'figure:d' }])
+    const surface = await read(() => ({ subject: assistant.surface.subject, anchor: assistant.surface.anchor() }))
+    assert.deepEqual(surface, { subject: 'figure', anchor: { anchorType: 'figure', anchorId: 'd' } })
+    assert.equal(await beforeUnload(), false, 'nothing unsaved: leaving is not asked about')
+  })
+
+  test('the properties tab: the figure stands there while nothing is picked, and gives way to a picked part', async () => {
+    await press(TAB('properties'), 'the properties tab')
+    await until(() => product.deep('figure-modeller-page >>> figure-properties')[0]?.checkVisibility(), 'the figure properties shown')
+    assert.deepEqual(await properties(), { slot: 'figure', visible: true })
+    await pick('leaf')
+    await until(() => !product.deep('figure-modeller-page >>> figure-properties')[0].checkVisibility(), 'the part in its place')
+  })
+
+  test('picking parts: the dock hears the part with the version it was seen on, and is not told of the picking', async () => {
+    const before = (await said()).length
+    await pick('frame')
+    await until(() => assistant.surface.hostContext().selection?.part === 'frame', 'frame picked')
+    const { context, revision, selection } = await hostContext()
+    assert.deepEqual(selection, { part: 'frame', context, revision })
+    await pick('leaf')
+    await until(() => assistant.surface.hostContext().selection?.part === 'leaf', 'leaf picked')
+    assert.deepEqual((await said()).slice(before), [], 'neither a new conversation nor a notice')
+  })
+
+  test('what the preview tries is heard too, on the version it was seen on', async () => {
+    await press('figure-editor >>> button[mode]:not([aria-pressed=true])', 'the preview')
+    const slider = 'figure-editor >>> figure-preview >>> div[clips] input[type=range]'
+    await until(s => !!product.deep(s)[0], 'the clip slider', slider)
+    /* The clip's speed: its slider comes after the figure's own controls. */
+    await read(s => { const input = product.deep(s).at(-1); input.value = '1.5'; input.dispatchEvent(new Event('input')) }, slider)
+    const { context, revision, trying } = await hostContext()
+    assert.deepEqual(trying, { clips: { swing: 1.5 }, context, revision })
+    await press('figure-editor >>> button[mode]:not([aria-pressed=true])', 'the edit canvas')
+  })
+
+  test('renamed in the properties: one step, undone like any edit; the title follows; the dock reads the draft when asked', async () => {
+    await page().keyboard.press('Escape')
+    await until(() => product.deep('figure-modeller-page >>> figure-properties')[0]?.checkVisibility(), 'the figure properties shown')
+    const before = await hostContext()
+    await rename('Door 2')
+    await until(() => product.view().name === 'Door 2', 'renamed')
+    assert.equal((await read(() => product.view())).revision, before.revision + 1)
+    assert.equal((await read(() => product.context())).title, 'Door 2')
+    const now = await hostContext()
+    assert.deepEqual({ name: now.name, revision: now.revision }, { name: 'Door 2', revision: before.revision + 1 })
+    await undo()
+    await until(() => product.view().name === 'Door', 'undone')
+  })
+
+  test('fitting from the properties declares the room from the parts, as one step', async () => {
+    const before = await read(() => product.view())
+    await press('figure-properties >>> button[act]', 'fit to the parts')
+    await until(() => product.deep('figure-properties >>> div[row] > span')[0]?.textContent === 'figure.text.declared-space-declared', 'the room declared')
+    assert.equal((await read(() => product.view())).revision, before.revision + 1)
+  })
+
+  test('unsaved: closing or reloading the tab is asked about', async () => {
+    assert.equal((await read(() => product.view())).dirty, true)
+    assert.equal(await beforeUnload(), true)
+  })
+
+  test('a new figure gives the dock nothing to talk about, and the rail does not mark the catalogue', async () => {
+    await press('button[save]', 'save')
+    await until(() => !product.view().dirty, 'saved')
+    await read(() => assistant.forget())
+    await open(null)
+    assert.deepEqual(await said(), [{ call: 'clear' }], 'the saved figure\'s conversation taken back, none given')
+    assert.equal(await read(() => assistant.surface), null)
+    assert.equal((await read(() => product.context())).menu, undefined)
+  })
+
+  test('inactive: the surface is taken back', async () => {
+    await open('d')
+    await until(() => assistant.said().some(s => s.call === 'provide'), 'provided again')
+    await read(() => assistant.forget())
+    await read(() => product.leave())
+    assert.deepEqual(await said(), [{ call: 'clear' }])
+  })
+
+  test('gone: the surface is taken back, and the tab is no longer held', async () => {
+    await open('d')
+    await rename('Door 3')
+    await until(() => product.view().dirty, 'edited')
+    await read(() => assistant.forget())
+    await read(() => product.page().remove())
+    assert.deepEqual(await said(), [{ call: 'clear' }])
+    assert.equal(await beforeUnload(), false)
+  })
+})
+
+describe('AI proposals reaching the page', () => {
+  before(async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'd', type: 'door', source: product.doorSource() }))
+    await open('d')
+  })
+  /** A `figure-apply` sent as the dock's handler sends it; its detail as the page left it. */
+  const offer = detail => read(detail => { window.dispatchEvent(new CustomEvent('figure-apply', { detail })); return detail }, detail)
+
+  test('the client entry registers the handler for figure proposals', async () => {
+    assert.deepEqual((await said()).filter(s => s.call === 'register'), [{ call: 'register', tool: 'proposeFigureCandidate' }])
+  })
+
+  test('a proposal is applied on the version the model saw, as one step; on another version it is refused', async () => {
+    const { context, revision } = await read(() => product.view())
+    const taken = await offer({ steps: LID, create: false, context, revision })
+    assert.equal(taken.applied, true)
+    const now = await read(() => product.view())
+    assert.equal(now.revision, revision + 1)
+    assert.ok(JSON.parse(now.source).appearance.some(a => a.target === 'lid'))
+    const stale = await offer({ steps: LID, create: false, context, revision })
+    assert.deepEqual({ applied: stale.applied, code: stale.code }, { applied: false, code: 'REVISION_CONFLICT' })
+  })
+
+  test('a proposal that would stop a clip is refused whole, the clip named', async () => {
+    const before = await read(() => product.view())
+    const refused = await offer({ steps: [{ kind: 'remove-part', target: 'leaf' }], create: false, context: before.context, revision: before.revision })
+    assert.deepEqual({ applied: refused.applied, code: refused.code, clips: refused.clips }, { applied: false, code: 'CLIPS_DROPPED', clips: ['swing'] })
+    const after = await read(() => product.view())
+    assert.deepEqual({ source: after.source, revision: after.revision }, { source: before.source, revision: before.revision })
+  })
+
+  test('the dock checks what became of a proposal with the server', async () => {
+    await read(() => product.answer('figureProposalOutcome', () => [{ figureId: 'd', type: 'door', name: 'Door', recordedAt: null }]))
+    const outcome = await read(key => assistant.surface.proposalOutcome(key), K1)
+    assert.deepEqual(outcome, { verdict: 'accepted', note: 'figure.text.proposal-saved-into {"names":"Door"}' })
+    assert.deepEqual(await callsTo('figureProposalOutcome'), [{ proposalKey: K1 }])
+  })
+
+  test("a new figure proposed: the modeller opens a new one, takes the steps under the proposal's key, and the dock is told", async () => {
+    await press('button[save]', 'save')
+    await until(() => !product.view().dirty, 'saved')
+    await read(() => product.forget())
+    const outcome = await read(
+      async ({ key, steps }) => {
+        const told = []
+        const outcome = await assistant.handlers.proposeFigureCandidate({ key, steps, create: true }, { notify: (level, note) => told.push({ level, note }) })
+        return { outcome, told }
+      },
+      { key: K2, steps: LID }
+    )
+    assert.deepEqual(outcome, {
+      outcome: { verdict: 'accepted', applied: 1, note: 'figure.text.proposal-applied {"n":"1"}' },
+      told: [{ level: 'info', note: 'figure.text.proposal-applied {"n":"1"}' }]
+    })
+    assert.deepEqual((await read(() => product.navigations())).map(n => n.path), ['/figure-modeller'])
+    const made = await read(() => product.view())
+    assert.equal(made.id, undefined)
+    assert.ok(JSON.parse(made.source).appearance.some(a => a.target === 'lid'))
+    await press('button[save]', 'save')
+    await press('figure-first-save >>> md-filled-button[slot=confirm]', 'the first save')
+    await until(() => product.view().id, 'saved')
+    const [saved] = await callsTo('saveFigure')
+    assert.deepEqual({ creationId: saved.creationId, proposalKeys: saved.proposalKeys }, { creationId: K2, proposalKeys: [K2] })
+  })
+})
+
+describe('the catalogue preview', () => {
+  before(async () => {
+    await fresh()
+    await read(() => product.seed({ id: 'a', type: 'agv', source: product.boxSource('A') }))
+  })
+  const shown = () => read(() => product.detailShown())
+
+  test('it belongs to the catalogue: another page closes it, moving within the catalogue does not', async () => {
+    await read(() => {
+      product.goTo('/figure-list')
+      product.openDetail('a')
+    })
+    await until(() => product.deep('figure-detail-dock')[0]?.isConnected, 'the preview open')
+    await read(() => product.goTo('/figure-list/a'))
+    assert.equal(await shown(), true)
+    await read(() => product.goTo('/board-list'))
+    assert.equal(await shown(), false)
+  })
+
+  test('editing from it closes it before the modeller opens', async () => {
+    await read(() => {
+      product.goTo('/figure-list')
+      product.forget()
+      product.openDetail('a')
+    })
+    await press('figure-detail-dock >>> footer button', 'edit')
+    await until(() => product.navigations().length, 'the modeller opened')
+    assert.deepEqual(await read(() => product.navigations().map(({ path, detailShown }) => ({ path, detailShown }))), [{ path: '/figure-modeller/a', detailShown: false }])
+  })
+})
+
+describe('the page at a narrow width', () => {
+  before(async () => {
+    await fresh()
+    await page().setViewport({ width: 945, height: 900 })
+    await read(() => product.seed({ id: 'a', type: 'agv', source: product.boxSource('A') }))
+    await open('a')
+  })
+  after(() => page().setViewport({ width: 1400, height: 900 }))
+
+  test('the page fits the width it is given: the history panel does not run off its right edge', async () => {
+    await press(TAB('history'), 'the history tab')
+    await until(p => product.deep(p)[0]?.checkVisibility(), 'the history panel', PANEL)
+    const edges = await read(p => ({ panel: product.deep(p)[0].getBoundingClientRect().right, page: product.page().getBoundingClientRect().right, window: innerWidth }), PANEL)
+    assert.ok(edges.panel <= edges.page && edges.page <= edges.window, JSON.stringify(edges))
+  })
+})