// Single pane SP9 (#1873): an organization's workflows, read only. #/orgs/<id>/workflows lists them,
// #/orgs/<id>/workflows/<name> draws one as an inline-SVG graph (one box per step, an arrowed line per
// hand-off), and the organization page carries a small card. The data is what GET /api/orgs/<id>/workflows
// returns from the organization file: steps in order, each with a title, a state and its roles. Nothing
// else is drawn. A stopped organization is not read and says why.
// SP10 (#1873): the graph page edits the workflow. The change is held in the page until Save, which sends one
// POST with the revision the page read; a refusal is shown in words and the change kept; the poll never draws
// over a pending change. The fixture's write stub keeps the organization file and its revision, as the bus does.
import test from 'node:test';
import assert from 'node:assert/strict';
import { startServer } from '../src/serve.mjs';
import { createDevOwner } from '../src/dev-owner.mjs';
import { browser } from './browser.mjs';
import { close } from './fixture.mjs';

const XSS = '<img src=x onerror=window.__sp9pwn=1>';
const at = minutes => new Date(Date.now() - minutes * 60000).toISOString();
const waitFor = b => (expression, what = expression) => b.evaluate(`(async()=>{for(let i=0;i<300;i++){if(${expression})return true;await new Promise(r=>setTimeout(r,30))}throw Error(${JSON.stringify(what)}+': '+document.body.innerText.slice(0,1500))})()`);

// The coding starter pack's workflow as pack.apply writes it (the pack's step ids are not kept).
const CHANGE = {
  description: 'One change from task to merge.',
  steps: [
    { title: 'Write the task', roles: ['pm'], state: 'todo' },
    { title: 'Implement the change', roles: ['coder'], state: 'in-progress' },
    { title: 'Review the change', roles: ['reviewer'], state: 'in-review' },
    { title: 'Approve the merge', roles: ['human', 'merge-gate'], state: 'done' },
  ],
};
const DOCS = {
  acme: {
    definitions: { pm: {}, coder: {}, reviewer: {} },
    workflows: { change: CHANGE, intake: { title: `Intake ${XSS}`, steps: [{ title: `Sort ${XSS}`, state: 'todo', roles: ['human'] }] } },
    projects: { site: { workflows: { change: { title: 'Site release', steps: [{ title: 'Build', state: 'in-progress', roles: ['coder'] }, { title: 'Ship', state: 'done', roles: ['human'] }] } } }, notes: { kind: 'library', workflows: { hidden: { steps: [{ title: 'x', state: 'todo', roles: ['human'] }] } } } },
  },
  bare: { definitions: {}, projects: {} },
};
const LIST = [
  { id: 'acme', label: 'Acme Studio', theme: 'cobalt', busHealthy: true },
  { id: 'bare', label: 'Bare Works', theme: 'grove', busHealthy: true },
  { id: 'gamma', label: 'Gamma Home', theme: 'rosewood', busHealthy: false, busStopped: true },
];

// The organization files as the bus holds them: each organization's document and revision, the writes the
// page sent, and a refusal to give the next write. A write with another revision is a revision-conflict.
const hex = n => n.toString(16).padStart(64, '0');
function store(writable) {
  const st = { writable, docs: structuredClone(DOCS), revs: { acme: 'a'.repeat(64), bare: 'b'.repeat(64), gamma: 'c'.repeat(64) }, writes: [], refuse: null, n: 0 };
  const fail = code => Object.assign(new Error(code), { code });
  st.write = (id, verb, args) => {
    st.writes.push({ id, verb, args: structuredClone(args) });
    if (verb !== 'workflow.set.console') throw fail('not-configured');
    if (st.refuse) { const code = st.refuse; st.refuse = null; throw fail(code); }
    if (args.revision !== st.revs[id]) throw fail('revision-conflict');
    const doc = st.docs[id], scope = args.project ? doc.projects[args.project] : doc;
    scope.workflows ??= {};
    if (args.workflow === null) delete scope.workflows[args.name]; else scope.workflows[args.name] = structuredClone(args.workflow);
    st.revs[id] = hex(++st.n);
    return { revision: st.revs[id], added: [] };
  };
  // Another writer changes the file outside the page.
  st.change = (id, fn) => { fn(st.docs[id]); st.revs[id] = hex(1000 + ++st.n); };
  return st;
}
function organizations(reads, st) {
  const member = org => ({
    id: org.id, doc: { appearance: { theme: org.theme }, roles: {}, projects: {} },
    status: async () => (org.busHealthy ? { healthy: true, pid: 4242, boot: null } : { healthy: false, boot: { ok: false, at: at(90), lastGood: null, reason: 'stopped by the owner' } }),
    options: () => ({ bus: { inbox: async () => [], agents: async () => [], 'thread.claims': async () => [], tasks: async () => [] }, chat: { threads: async () => [], projects: async () => [] } }),
  });
  return {
    list: async () => LIST,
    members: async () => LIST.map(member),
    resolve: async id => {
      const org = LIST.find(o => o.id === id); if (!org) return null;
      const workflowsRead = async () => { reads.push(id); if (st.failRead) throw Object.assign(new Error('org-unavailable'), { code: 'org-unavailable' }); return { revision: st.revs[id], document: structuredClone(st.docs[id] ?? {}), templates: ['writer'] }; };
      if (!org.busHealthy) return { busHealthy: false, reads: null, bus: {}, workflowsRead, chat: { projects: async () => [], threads: async () => [] } };
      return {
        busHealthy: true, workflowsRead, packsWrite: st.writable ? async (verb, args) => st.write(id, verb, args) : null, decisionWrite: async () => ({}), send: async () => ({}),
        requestRead: async verb => { if (verb === 'packs.console') return { packs: [] }; if (verb === 'autonomy.get.console') return { revision: 'e'.repeat(64), autonomy: {}, levels: {} }; throw Object.assign(new Error('not-configured'), { code: 'not-configured' }); },
        reads: { business: async () => ({ business: { id, projects: [], instances: [] } }), settings: async () => ({}), queue: async () => ({ rows: [] }) },
        bus: { instances: async () => ({ instances: {} }), agents: async () => [], 'thread.claims': async () => [], tasks: async () => [], inbox: async () => [], messages: async () => ({ messages: [] }) },
        chat: { projects: async () => [], threads: async () => [] },
      };
    },
  };
}

async function setup(t, { path, viewport = [1440, 900], mode = null, writable = true } = {}) {
  const reads = [], st = store(writable);
  const server = await startServer({ port: 0, sso: createDevOwner(), send: async () => ({}), log: () => {}, organizations: organizations(reads, st) });
  t.after(() => close(server));
  const b = await browser({ machine: false, args: ['--disable-extensions'] });
  t.after(() => b.close());
  await b.viewport(...viewport);
  // The Console's own mode wins over the OS setting (Harbor in the dark by default), so a theme test sets it per organization.
  if (mode) await b.call('Page.addScriptToEvaluateOnNewDocument', { source: `try { for (const o of ['acme','bare','gamma']) localStorage.setItem('mosaic-console-appearance:' + o, JSON.stringify({ theme: 'harbor', mode: ${JSON.stringify(mode)} })); } catch {}` });
  await b.navigate(`http://127.0.0.1:${server.address().port}/${path}`);
  return { b, reads, st, wait: waitFor(b) };
}

const boxes = `[...document.querySelectorAll('[data-wfg-graph] [data-wfg-step]')]`;

test('the list names each workflow by scope with its steps in order, links to its graph, and keeps titles as text', { timeout: 60000 }, async t => {
  const { b, wait } = await setup(t, { path: '#/orgs/acme/workflows' });
  await wait(`document.querySelector('[data-wfg-list] [data-wfg-item="change"]')`, 'workflow list');
  assert.equal(await b.evaluate(`document.querySelector('#bus-view h1').textContent`), 'Workflows');
  // Organization first, then each code project; a library project has no workflows.
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-scope-list]')].map(n=>[n.dataset.wfgScopeList,n.querySelector('h2').textContent])`), [['', 'Organization'], ['site', 'Project site']]);
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-scope-list=""] [data-wfg-item]')].map(n=>n.dataset.wfgItem)`), ['change', 'intake']);
  const change = `[data-wfg-scope-list=""] [data-wfg-item="change"]`;
  assert.equal(await b.evaluate(`document.querySelector('${change} a[data-wfg-open]').getAttribute('href')`), '#/orgs/acme/workflows/change');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-scope-list="site"] [data-wfg-item="change"] a[data-wfg-open]').getAttribute('href')`), '#/orgs/acme/workflows/change?project=site');
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('${change} [data-wfg-chain] li')].map(l=>l.textContent)`), ['Write the task', 'Implement the change', 'Review the change', 'Approve the merge']);
  assert.match(await b.evaluate(`document.querySelector('${change}').textContent`), /4 steps/);
  assert.match(await b.evaluate(`document.querySelector('${change}').textContent`), /One change from task to merge\./);
  // The title is shown as written.
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-item="intake"] a[data-wfg-open]').textContent`), `Intake ${XSS}`);
  assert.equal(await b.evaluate(`document.querySelectorAll('#bus-view img').length`), 0);
  assert.equal(await b.evaluate(`window.__sp9pwn===undefined`), true);
  assert.equal(await b.evaluate(`document.querySelector('#bus-view [data-ws-unread]')`), null, 'a running bus has no unread note');
  // The trail names the organization and the page.
  await wait(`document.querySelector('#breadcrumbs [data-crumb-org]')?.textContent === 'Acme Studio'`, 'org crumb');
  // A click opens the graph.
  await b.evaluate(`document.querySelector('${change} a[data-wfg-open]').click();true`);
  await wait(`location.hash === '#/orgs/acme/workflows/change' && document.querySelectorAll('[data-wfg-graph] [data-wfg-step]').length === 4`, 'graph after click');
});

test('the graph draws one box per step in order with its roles and one arrowed edge per hand-off', { timeout: 60000 }, async t => {
  const { b, wait } = await setup(t, { path: '#/orgs/acme/workflows/change' });
  await wait(`${boxes}.length === 4`, 'four boxes');
  assert.equal(await b.evaluate(`document.querySelector('#bus-view h1').textContent`), 'change');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-graph]').tagName.toLowerCase()`), 'svg');
  assert.deepEqual(await b.evaluate(`${boxes}.map(g=>g.dataset.wfgStep)`), ['1', '2', '3', '4']);
  assert.deepEqual(await b.evaluate(`${boxes}.map(g=>g.querySelector('[data-wfg-title]').textContent)`), ['Write the task', 'Implement the change', 'Review the change', 'Approve the merge']);
  // One role per line.
  assert.deepEqual(await b.evaluate(`${boxes}.map(g=>[...g.querySelectorAll('[data-wfg-roles] tspan')].map(t=>t.textContent))`), [['pm'], ['coder'], ['reviewer'], ['human', 'merge-gate']]);
  // A role that resolves to no definition or template (and is not human) is marked on its box.
  assert.deepEqual(await b.evaluate(`${boxes}.map(g=>g.querySelectorAll('[data-wfg-missing]').length)`), [0, 0, 0, 1]);
  // sp9 follow-up: the missing role's whole name shows at 1440, on its own line under "No current role:".
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-step="4"] [data-wfg-missing] tspan')].map(t=>t.textContent)`), ['No current role:', 'merge-gate']);
  // At 1440 the steps run left to right.
  const xs = await b.evaluate(`${boxes}.map(g=>g.querySelector('rect').getBoundingClientRect().left)`);
  assert.deepEqual([...xs].sort((p, q) => p - q), xs);
  assert.equal(new Set(xs).size, 4);
  // One edge per hand-off, from each box to the next, with an arrowhead.
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-graph] [data-wfg-edge]')].map(e=>e.dataset.wfgEdge)`), ['1-2', '2-3', '3-4']);
  const touches = await b.evaluate(`[...document.querySelectorAll('[data-wfg-graph] [data-wfg-edge]')].map(e=>{
    const [f,t]=e.dataset.wfgEdge.split('-'), box=n=>document.querySelector('[data-wfg-graph] [data-wfg-step="'+n+'"] rect').getBBox();
    const p=e.getPointAtLength(0), q=e.getPointAtLength(e.getTotalLength()), a=box(f), z=box(t), near=(pt,r)=>pt.x>=r.x-14&&pt.x<=r.x+r.width+14&&pt.y>=r.y-14&&pt.y<=r.y+r.height+14;
    return near(p,a)&&near(q,z)&&!!e.getAttribute('marker-end');})`);
  assert.deepEqual(touches, [true, true, true]);
  // The graph scrolls inside its own box, never the page.
  assert.equal(await b.evaluate(`document.documentElement.scrollWidth<=innerWidth`), true);
  // Nothing running is drawn: no read links a task to a step.
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-running]')`), null);
});

test('selecting a step shows what the data holds for it and survives a repaint', { timeout: 60000 }, async t => {
  const { b, wait, reads } = await setup(t, { path: '#/orgs/acme/workflows/change' });
  await wait(`${boxes}.length === 4`, 'four boxes');
  assert.match(await b.evaluate(`document.querySelector('[data-wfg-detail]').textContent`), /Select a step/);
  await b.evaluate(`document.querySelector('[data-wfg-step="2"]').dispatchEvent(new MouseEvent('click',{bubbles:true,cancelable:true}));true`);
  await wait(`/[?&]step=2/.test(location.hash) && document.querySelector('[data-wfg-detail] [data-wfg-detail-title]')?.textContent === 'Implement the change'`, 'detail for step 2');
  assert.equal(await b.evaluate(`location.hash`), '#/orgs/acme/workflows/change?step=2');
  const field = name => b.evaluate(`document.querySelector('[data-wfg-detail] [data-wfg-field="${name}"]')?.textContent.replace(/\\s+/g,' ').trim() ?? null`);
  assert.equal(await field('position'), 'Step 2 of 4');
  assert.equal(await field('roles'), 'coder');
  assert.equal(await field('state'), 'In progress');
  assert.equal(await field('after'), 'Step 1, Write the task');
  assert.equal(await field('next'), 'Step 3, Review the change');
  // The workflow file holds no gate or inputs for a step; the panel says so once instead of inventing them.
  assert.match(await b.evaluate(`document.querySelector('[data-wfg-detail]').textContent`), /records no gate or inputs/);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-step="2"]').getAttribute('aria-current')`), 'step');
  assert.equal(await b.evaluate(`document.querySelectorAll('[data-wfg-graph] [aria-current]').length`), 1);
  // The last step hands on to nothing; an unknown role is named in the panel too.
  await b.evaluate(`document.querySelector('[data-wfg-step="4"]').dispatchEvent(new MouseEvent('click',{bubbles:true,cancelable:true}));true`);
  await wait(`document.querySelector('[data-wfg-detail] [data-wfg-detail-title]')?.textContent === 'Approve the merge'`, 'detail for step 4');
  assert.equal(await field('next'), 'Nothing: this is the last step');
  assert.match(await field('roles'), /human \(a person\)/);
  assert.match(await field('roles'), /merge-gate names no current role/);
  // Keyboard: a step box takes focus and opens on Enter, and keeps focus through the repaint.
  await b.evaluate(`document.querySelector('[data-wfg-step="1"]').focus();true`);
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-step:1');
  await b.key('Enter');
  await wait(`document.querySelector('[data-wfg-detail] [data-wfg-detail-title]')?.textContent === 'Write the task' && document.activeElement?.dataset.focusKey === 'wfg-step:1'`, 'Enter opens step 1 and keeps focus');
  assert.equal(await b.evaluate(`location.hash`), '#/orgs/acme/workflows/change?step=1');
  await b.evaluate(`document.querySelector('[data-wfg-step="4"]').focus();true`);
  await b.key('Enter');
  await wait(`document.querySelector('[data-wfg-detail] [data-wfg-detail-title]')?.textContent === 'Approve the merge'`, 'Enter opens step 4');
  // A repaint (the poll) keeps the selection.
  const before = reads.length;
  await b.evaluate(`document.dispatchEvent(new CustomEvent('mosaic-workspace-render'));true`);
  await wait(`document.querySelector('[data-wfg-detail] [data-wfg-detail-title]')?.textContent === 'Approve the merge'`, 'kept after repaint');
  assert.ok(reads.length >= before);
  // A project's workflow of the same name is its own graph.
  await b.evaluate(`location.hash = '#/orgs/acme/workflows/change?project=site'`);
  await wait(`${boxes}.length === 2`, 'project graph');
  assert.match(await b.evaluate(`document.querySelector('#bus-view').textContent`), /Project site/);
  // A name the scope does not hold says so.
  await b.evaluate(`location.hash = '#/orgs/acme/workflows/nope'`);
  await wait(`/No workflow named nope/.test(document.querySelector('#bus-view').textContent)`, 'unknown workflow');
});

test('a step with more roles than fit shows three lines, the last counting the rest, all inside its box', { timeout: 60000 }, async t => {
  // The business-management pack's first step names four long roles.
  const roles = ['chief-executive-officer', 'chief-financial-officer', 'chief-information-officer', 'chief-information-security-officer'];
  DOCS.acme.workflows.brief = { steps: [{ title: 'Draft the brief', state: 'todo', roles }, { title: 'WWWWWWWWWWWWWWWWWWWWWWWW WWWWWWWWWWWWWWWWWWWWWWWW WWWWWWWWWWWWWWWWWWWW', state: 'done', roles: ['human'] }] };
  t.after(() => { delete DOCS.acme.workflows.brief; });
  for (const viewport of [[1440, 900], [390, 844]]) {
    await t.test(String(viewport[0]), async t2 => {
      const { b, wait } = await setup(t2, { path: '#/orgs/acme/workflows/brief', viewport });
      await wait(`${boxes}.length === 2`, 'two boxes');
      const one = `document.querySelector('[data-wfg-step="1"]')`;
      // A role longer than the box is shortened with an ellipsis (the full name is in the box's title and the step panel).
      const lines = await b.evaluate(`[...${one}.querySelectorAll('[data-wfg-roles] tspan')].map(t=>t.textContent)`);
      assert.equal(lines.length, 3);
      assert.equal(lines[2], '+2 more');
      lines.slice(0, 2).forEach((line, i) => assert.ok(line === roles[i] || (line.endsWith('…') && roles[i].startsWith(line.slice(0, -1))), line));
      if (viewport[0] === 390) assert.deepEqual(lines.slice(0, 2), roles.slice(0, 2), 'the 390 column is wide enough for the whole name');
      assert.equal(await b.evaluate(`${one}.querySelector('[data-wfg-roles] [data-wfg-more]').textContent`), '+2 more');
      // The box names every role for a pointer or a screen reader.
      const named = await b.evaluate(`${one}.querySelector('title').textContent + ' ' + (${one}.getAttribute('aria-label') ?? '')`);
      for (const r of roles) assert.ok(named.includes(r), r);
      // Every text line ends inside its own box: its drawn extent, not what the clip path lets show, ends left
      // of the clip edge (8px inside the box) and above the box bottom.
      const out = await b.evaluate(`${boxes}.flatMap(g=>{const r=g.querySelector('rect'),right=r.x.baseVal.value+r.width.baseVal.value-8,bottom=r.y.baseVal.value+r.height.baseVal.value;
        return [...g.querySelectorAll('text')].flatMap(t=>{const spans=[...t.querySelectorAll('tspan')];return (spans.length?spans:[t]).filter(e=>e.getNumberOfChars()>0).filter(e=>{let n=e.getNumberOfChars();while(n>1&&/\\s/.test(e.textContent[n-1]))n--;const z=e.getExtentOfChar(n-1),a=e.getExtentOfChar(0);return z.x+z.width>right+0.5||z.y+z.height>bottom+0.5||a.x<r.x.baseVal.value}).map(e=>e.textContent)})})`);
      assert.deepEqual(out, []);
      assert.equal(await b.evaluate(`document.documentElement.scrollWidth<=innerWidth`), true);
    });
  }
});

test('an organization with no workflows says so on its page and its card, and links to apply a pack', { timeout: 60000 }, async t => {
  const { b, wait } = await setup(t, { path: '#/orgs/bare/workflows' });
  await wait(`document.querySelector('[data-wfg-list] [data-wfg-none]')`, 'none note');
  assert.match(await b.evaluate(`document.querySelector('[data-wfg-none]').textContent`), /No workflows in Bare Works yet/);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-list] [data-wfg-apply]').getAttribute('href')`), '#/orgs/bare/organization');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-list] [data-wfg-item]')`), null);
  // The organization page's card says the same and links the list.
  await b.evaluate(`location.hash = '#/orgs/bare/organization'`);
  await wait(`document.querySelector('[data-org-dashboard] [data-wfg-card] [data-wfg-none]')`, 'card none');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-card] [data-wfg-all]').getAttribute('href')`), '#/orgs/bare/workflows');
  // Apply a pack takes the person to the pack picker on the same page.
  await wait(`document.querySelector('[data-packs]')`, 'packs section');
  await b.evaluate(`document.querySelector('[data-wfg-card] [data-wfg-apply]').click();true`);
  await wait(`(()=>{const r=document.querySelector('[data-packs]').getBoundingClientRect();return r.top>=0&&r.top<innerHeight})()`, 'packs in view');
  assert.equal(await b.evaluate(`location.hash`), '#/orgs/bare/organization');
});

test('the organization page card lists each workflow as a link to its graph', { timeout: 60000 }, async t => {
  const { b, wait, reads } = await setup(t, { path: '#/orgs/acme/organization' });
  await wait(`document.querySelectorAll('[data-org-dashboard] [data-wfg-card] [data-wfg-card-item]').length === 3`, 'card items');
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-card] [data-wfg-card-item]')].map(a=>[a.getAttribute('href'),a.textContent.replace(/\\s+/g,' ').trim()])`), [
    ['#/orgs/acme/workflows/change', 'change 4 steps'],
    ['#/orgs/acme/workflows/intake', `Intake ${XSS} 1 step`],
    ['#/orgs/acme/workflows/change?project=site', 'Site release 2 steps, project site'],
  ]);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-card] [data-wfg-all]').getAttribute('href')`), '#/orgs/acme/workflows');
  assert.equal(await b.evaluate(`document.querySelectorAll('[data-org-dashboard] img').length`), 0);
  assert.equal(await b.evaluate(`window.__sp9pwn===undefined`), true);
  // The card reuses the page's one workflow read; it sends no second one.
  assert.equal(reads.filter(id => id === 'acme').length, 1);
  await b.evaluate(`document.querySelector('[data-wfg-card] [data-wfg-card-item]').click();true`);
  await wait(`location.hash === '#/orgs/acme/workflows/change' && document.querySelectorAll('[data-wfg-graph] [data-wfg-step]').length === 4`, 'graph from card');
});

test('a stopped organization is not read: the page and card say the bus is stopped with the reason, never "no workflows"', { timeout: 60000 }, async t => {
  const { b, wait, reads } = await setup(t, { path: '#/orgs/gamma/workflows' });
  await wait(`document.querySelector('[data-wfg-list] [data-ws-unread]')`, 'unread note');
  const note = await b.evaluate(`document.querySelector('[data-wfg-list] [data-ws-unread]').textContent`);
  assert.match(note, /^Not read: Gamma Home/);
  assert.match(note, /stopped by the owner/);
  assert.doesNotMatch(await b.evaluate(`document.querySelector('#bus-view').textContent`), /No workflows/);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-none],[data-wfg-item]')`), null);
  // The graph address says the same.
  await b.evaluate(`location.hash = '#/orgs/gamma/workflows/change'`);
  await wait(`document.querySelector('[data-wfg-page] [data-ws-unread]')`, 'graph unread note');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-graph]')`), null);
  assert.doesNotMatch(await b.evaluate(`document.querySelector('#bus-view').textContent`), /No workflow/);
  // The organization page card.
  await b.evaluate(`location.hash = '#/orgs/gamma/organization'`);
  await wait(`document.querySelector('[data-org-dashboard] [data-wfg-card][data-bus-stopped]')`, 'stopped card');
  assert.match(await b.evaluate(`document.querySelector('[data-wfg-card]').textContent`), /Not read: the bus is stopped\./);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-card] [data-wfg-none]')`), null);
  assert.equal(reads.filter(id => id === 'gamma').length, 0, 'a stopped organization is not read');
});

test('at 390 the graph runs top to bottom inside its box and the page does not scroll sideways', { timeout: 60000 }, async t => {
  for (const mode of ['light', 'dark']) {
    const dark = mode === 'dark';
    await t.test(mode, async t2 => {
      const { b, wait } = await setup(t2, { path: '#/orgs/acme/workflows/change?step=3', viewport: [390, 844], mode });
      await wait(`${boxes}.length === 4 && document.querySelector('[data-wfg-detail-title]')`, 'graph at 390');
      assert.equal(await b.evaluate(`document.documentElement.dataset.mode`), mode, 'the page shows the mode under test');
      const ys = await b.evaluate(`${boxes}.map(g=>g.querySelector('rect').getBoundingClientRect().top)`);
      assert.deepEqual([...ys].sort((p, q) => p - q), ys);
      assert.equal(new Set(ys).size, 4);
      assert.equal(await b.evaluate(`document.documentElement.scrollWidth<=innerWidth`), true, 'no sideways page scroll');
      // Every box fits the width of its own box.
      assert.equal(await b.evaluate(`(()=>{const w=document.querySelector('[data-wfg-graph]').closest('[data-wfg-frame]').getBoundingClientRect();return ${boxes}.every(g=>{const r=g.querySelector('rect').getBoundingClientRect();return r.left>=w.left-1&&r.right<=w.right+1})})()`), true);
      // The box text and the edges read in the theme's colours, not the browser default black on dark.
      const fill = await b.evaluate(`getComputedStyle(document.querySelector('[data-wfg-step="1"] [data-wfg-title]')).fill`);
      const bg = await b.evaluate(`getComputedStyle(document.body).backgroundColor`);
      assert.notEqual(fill, bg);
      assert.notEqual(fill, dark ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)');
      // An SVG rect with no theme fill is drawn black.
      assert.notEqual(await b.evaluate(`getComputedStyle(document.querySelector('[data-wfg-step="1"] rect')).fill`), 'rgb(0, 0, 0)');
      // The list and the card fit too.
      await b.evaluate(`location.hash = '#/orgs/acme/workflows'`);
      await wait(`document.querySelector('[data-wfg-list] [data-wfg-item]')`, 'list at 390');
      assert.equal(await b.evaluate(`document.documentElement.scrollWidth<=innerWidth`), true, 'list: no sideways page scroll');
    });
  }
});

// ---------- SP10: editing a workflow in its graph ----------
const REV_A = 'a'.repeat(64);
const titles = `${boxes}.map(g=>g.querySelector('[data-wfg-title]').textContent)`;
const press = sel => `(()=>{const e=document.querySelector(${JSON.stringify(sel)});if(!e)throw Error('no '+${JSON.stringify(sel)});if(e.disabled)throw Error('disabled '+${JSON.stringify(sel)});e.click();return true})()`;
const pick = step => `document.querySelector('[data-wfg-step="${step}"]').dispatchEvent(new MouseEvent('click',{bubbles:true,cancelable:true}))`;
// Sets a form field as typing would: the value, then the input event the page listens for.
const fill = (sel, value) => `(()=>{const e=document.querySelector(${JSON.stringify(sel)});e.value=${JSON.stringify(value)};e.dispatchEvent(new Event('input',{bubbles:true}));return true})()`;
const role = (form, name) => `${form} input[name="role"][value="${name}"]`;
const text = sel => `(document.querySelector(${JSON.stringify(sel)})?.textContent ?? '').replace(/\\s+/g,' ').trim()`;

test('editing a step changes the graph on the page, and Save sends one POST with the revision the page read', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?step=4' });
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Approve the merge' && document.querySelector('[data-wfg-edit]')`, 'step 4 with Edit');
  // Nothing pending: no Unsaved, no Save.
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-unsaved],[data-wfg-save],[data-wfg-discard]')`), null);
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form] [data-wfg-form-title]')?.textContent === 'Edit step 4'`, 'step form');
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-f-title');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-form] input[name="title"]').value`), 'Approve the merge');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-form] select[name="state"]').value`), 'done');
  // The picker offers human, the organization's roles and the templates; the step's unknown role is first, checked and marked.
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-form] input[name="role"]')].map(i=>[i.value,i.checked])`), [['merge-gate', true], ['human', true], ['coder', false], ['pm', false], ['reviewer', false], ['writer', false]]);
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-form] [data-wfg-pick-missing]')`));
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Approve and merge'));
  await b.evaluate(press(role('[data-wfg-form]', 'merge-gate')));
  await b.evaluate(press(role('[data-wfg-form]', 'reviewer')));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${titles}[3] === 'Approve and merge' && document.querySelector('[data-wfg-unsaved]')`, 'pending change drawn');
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('[data-wfg-step="4"] [data-wfg-roles] tspan')].map(t=>t.textContent)`), ['human', 'reviewer']);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-step="4"] [data-wfg-missing]')`), null);
  assert.equal(await b.evaluate(text('[data-wfg-unsaved]')), 'Unsaved');
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-save');
  assert.equal(st.writes.length, 0, 'Apply writes nothing');
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/Saved change\\./.test(${text('[data-wfg-status]')}) && !document.querySelector('[data-wfg-unsaved]')`, 'saved');
  assert.equal(st.writes.length, 1);
  assert.deepEqual(st.writes[0], { id: 'acme', verb: 'workflow.set.console', args: { revision: REV_A, name: 'change', workflow: {
    description: 'One change from task to merge.',
    steps: [
      { title: 'Write the task', state: 'todo', roles: ['pm'] },
      { title: 'Implement the change', state: 'in-progress', roles: ['coder'] },
      { title: 'Review the change', state: 'in-review', roles: ['reviewer'] },
      { title: 'Approve and merge', state: 'done', roles: ['human', 'reviewer'] },
    ] } } });
  // The page now draws the file as saved, read again.
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Approve and merge'`, 'detail after save');
  assert.deepEqual(st.docs.acme.workflows.change.steps[3], { title: 'Approve and merge', state: 'done', roles: ['human', 'reviewer'] });
});

test('add, move, remove and discard change only the page until Save', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?step=2' });
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Implement the change'`, 'step 2');
  // Add after the selected step.
  await b.evaluate(press('[data-wfg-add]'));
  await wait(`document.querySelector('[data-wfg-form-title]')?.textContent === 'New step 3'`, 'add form');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Test the change'));
  await b.evaluate(`(()=>{const e=document.querySelector('[data-wfg-form] select[name="state"]');e.value='in-review';e.dispatchEvent(new Event('input',{bubbles:true}));return true})()`);
  // Apply with no role is refused in words, and the form stays.
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${text('[data-wfg-why]')} === 'Step 3 needs at least one role.'`, 'no role refused');
  await b.evaluate(press(role('[data-wfg-form]', 'coder')));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${boxes}.length === 5 && ${titles}[2] === 'Test the change'`, 'step added');
  assert.equal(await b.evaluate(`location.hash`), '#/orgs/acme/workflows/change?step=3');
  assert.equal(await b.evaluate(text('[data-wfg-field="state"]')), 'Review');
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-unsaved]')`));
  // Move earlier and later.
  await b.evaluate(press('[data-wfg-up]'));
  await wait(`${titles}[1] === 'Test the change' && /step=2/.test(location.hash)`, 'moved earlier');
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-up');
  await b.evaluate(press('[data-wfg-down]'));
  await wait(`${titles}[2] === 'Test the change' && /step=3/.test(location.hash)`, 'moved later');
  // Selecting another step goes through a full render (a read); the pending change stays.
  await b.evaluate(pick(1));
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Write the task' && ${boxes}.length === 5`, 'step 1, change kept');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-up]').disabled`), true, 'the first step cannot move earlier');
  await b.evaluate(press('[data-wfg-remove]'));
  await wait(`${boxes}.length === 4`, 'step removed');
  assert.deepEqual(await b.evaluate(titles), ['Implement the change', 'Test the change', 'Review the change', 'Approve the merge']);
  // With no step selected, Add puts a step at the end.
  await b.evaluate(`location.hash = '#/orgs/acme/workflows/change'`);
  await wait(`${text('[data-wfg-add]')} === 'Add a step at the end'`, 'add at end');
  await b.evaluate(press('[data-wfg-add]'));
  await wait(`document.querySelector('[data-wfg-form-title]')?.textContent === 'New step 5'`, 'add-at-end form');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Announce it'));
  await b.evaluate(press(role('[data-wfg-form]', 'pm')));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${boxes}.length === 5 && ${titles}[4] === 'Announce it' && /step=5/.test(location.hash)`, 'added at end');
  // Discard drops all of it; nothing was written.
  await b.evaluate(press('[data-wfg-discard]'));
  await wait(`${boxes}.length === 4 && !document.querySelector('[data-wfg-unsaved]')`, 'discarded');
  assert.deepEqual(await b.evaluate(titles), ['Write the task', 'Implement the change', 'Review the change', 'Approve the merge']);
  assert.equal(st.writes.length, 0);
});

test('a refused save says why next to Save and keeps the pending change', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?step=1' });
  await wait(`document.querySelector('[data-wfg-edit]')`, 'step 1');
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form]')`, 'form');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Write the brief'));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${titles}[0] === 'Write the brief'`, 'pending');
  // Step 4 still names merge-gate: the page refuses before sending, in the same words as the form editor.
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`${text('[data-wfg-status]')} === 'Step 4: merge-gate names no current role. Use an organization role, a role template or human.'`, 'unknown role refused');
  assert.equal(st.writes.length, 0);
  assert.ok(await b.evaluate(`${titles}[0] === 'Write the brief' && !!document.querySelector('[data-wfg-unsaved]')`));
  // Fix step 4, then the bus is down.
  await b.evaluate(pick(4));
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Approve the merge'`, 'step 4');
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form-title]')?.textContent === 'Edit step 4'`, 'form 4');
  await b.evaluate(press(role('[data-wfg-form]', 'merge-gate')));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`!document.querySelector('[data-wfg-step="4"] [data-wfg-missing]')`, 'step 4 fixed');
  st.refuse = 'no-bus-host';
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/bus is not running/.test(${text('[data-wfg-status]')})`, 'bus down refused');
  assert.match(await b.evaluate(text('[data-wfg-status]')), /Your change is kept/);
  assert.equal(st.writes.length, 1);
  assert.equal(st.writes[0].args.revision, REV_A);
  assert.ok(await b.evaluate(`${titles}[0] === 'Write the brief' && !!document.querySelector('[data-wfg-unsaved]') && !!document.querySelector('[data-wfg-save]')`));
  assert.equal(st.docs.acme.workflows.change.steps[0].title, 'Write the task', 'nothing written');
  // The status sits in the bar with Save.
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-bar] [data-wfg-status]') && !!document.querySelector('[data-wfg-bar] [data-wfg-save]')`));
  // Another writer changes this workflow: the save is refused as stale, the change kept.
  st.change('acme', doc => { doc.workflows.change.description = 'Changed elsewhere.'; });
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/changed since this page read it/.test(${text('[data-wfg-status]')})`, 'stale refused');
  assert.match(await b.evaluate(text('[data-wfg-status]')), /Your change is kept\. Discard to load the current version\./);
  assert.ok(await b.evaluate(`${titles}[0] === 'Write the brief' && !!document.querySelector('[data-wfg-unsaved]')`));
  assert.equal(st.writes.length, 2);
});

test('the poll does not draw over a pending change, takes a new revision when only other workflows changed, and says when this one changed', { timeout: 60000 }, async t => {
  const { b, wait, st, reads } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site&step=2' });
  // The site project's workflow names only current roles, so a save goes to the bus.
  await wait(`document.querySelector('[data-wfg-edit]')`, 'step 2');
  const repaint = async () => { const n = reads.length; await b.evaluate(`document.dispatchEvent(new CustomEvent('mosaic-workspace-render'));true`); await wait(`true`); for (let i = 0; i < 100 && reads.length === n; i++) await new Promise(r => setTimeout(r, 30)); await new Promise(r => setTimeout(r, 150)); };
  // A form being typed in survives a repaint as typed.
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form]')`, 'form');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Ship the release'));
  await repaint();
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-form] input[name="title"]')?.value`), 'Ship the release');
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${titles}[1] === 'Ship the release' && document.querySelector('[data-wfg-unsaved]')`, 'pending');
  await repaint();
  assert.equal(await b.evaluate(`${titles}[1]`), 'Ship the release', 'the poll keeps the pending change');
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-unsaved]')`));
  // Another workflow changes in the file: this one is as read, so the page takes the new revision and no warning shows.
  st.change('acme', doc => { doc.workflows.intake.title = 'Intake, renamed'; });
  const fresh = st.revs.acme;
  await repaint();
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-stale]')`), null);
  assert.equal(await b.evaluate(`${titles}[1]`), 'Ship the release');
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/Saved change\\./.test(${text('[data-wfg-status]')})`, 'saved on the new revision');
  assert.equal(st.writes.at(-1).args.revision, fresh);
  assert.equal(st.docs.acme.workflows.intake.title, 'Intake, renamed', 'the other workflow is untouched');
  // Now this workflow changes underneath a pending change: the page says so and offers Discard.
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form]')`, 'form again');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Build it'));
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${titles}[1] === 'Build it'`, 'pending again');
  st.change('acme', doc => { doc.projects.site.workflows.change.description = 'Changed elsewhere.'; });
  await repaint();
  await wait(`!!document.querySelector('[data-wfg-stale]')`, 'stale note');
  assert.match(await b.evaluate(text('[data-wfg-stale]')), /changed this workflow since the page read it.*Discard to load the current version/);
  assert.equal(await b.evaluate(`${titles}[1]`), 'Build it');
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-discard]')`));
  await b.evaluate(press('[data-wfg-discard]'));
  await wait(`${titles}[1] === 'Ship the release' && !document.querySelector('[data-wfg-stale],[data-wfg-unsaved]')`, 'discarded to current');
  assert.match(await b.evaluate(`document.querySelector('#bus-view .sub').textContent`), /Changed elsewhere\./);
});

test('a reader who cannot write sees no edit controls and one line saying who can', { timeout: 60000 }, async t => {
  const { b, wait } = await setup(t, { path: '#/orgs/acme/workflows/change?step=2', writable: false });
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Implement the change'`, 'step 2');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-bar],[data-wfg-actions],[data-wfg-edit],[data-wfg-add],[data-wfg-save],[data-wfg-delete],[data-wfg-form]')`), null);
  assert.deepEqual(await b.evaluate(`[...document.querySelectorAll('#bus-view [data-wfg-readonly]')].map(n=>n.textContent)`), ['Only the owner, on a Console started with send, can change workflows.']);
  assert.equal(await b.evaluate(`document.querySelectorAll('#bus-view button').length`), 0);
  await b.evaluate(`location.hash = '#/orgs/acme/workflows'`);
  await wait(`document.querySelector('[data-wfg-list] [data-wfg-item]')`, 'list');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-new]')`), null);
  assert.ok(await b.evaluate(`!!document.querySelector('[data-wfg-list] [data-wfg-readonly]')`));
});

test('a new workflow starts on the list page, opens in its graph unsaved, saves, and deletes after a confirm', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows' });
  await wait(`document.querySelector('[data-wfg-new]')`, 'New workflow');
  await b.evaluate(press('[data-wfg-new]'));
  await wait(`document.querySelector('[data-wfg-newform]')`, 'new form');
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-n-name');
  const create = async () => b.evaluate(press('[data-wfg-create]'));
  await b.evaluate(fill('[data-wfg-newform] input[name="name"]', 'Release Plan'));
  await create();
  await wait(`${text('[data-wfg-newform] [data-wfg-why]')} === 'A workflow name is 1 to 64 lowercase letters, digits or dashes, starting with a letter.'`, 'name refused');
  await b.evaluate(fill('[data-wfg-newform] input[name="name"]', 'change'));
  await create();
  await wait(`${text('[data-wfg-newform] [data-wfg-why]')} === 'A workflow named change already exists here. Edit it instead.'`, 'taken refused');
  await b.evaluate(fill('[data-wfg-newform] input[name="name"]', 'release'));
  await b.evaluate(fill('[data-wfg-newform] input[name="title"]', 'Cut the release'));
  await create();
  await wait(`${text('[data-wfg-newform] [data-wfg-why]')} === 'Step 1 needs at least one role.'`, 'role refused');
  await b.evaluate(press(role('[data-wfg-newform]', 'human')));
  await create();
  await wait(`location.hash === '#/orgs/acme/workflows/release?step=1' && ${boxes}.length === 1`, 'opens in the graph');
  assert.equal(await b.evaluate(text('[data-wfg-unsaved]')), 'Unsaved, not in the file yet');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-delete]')`), null, 'nothing to delete yet');
  assert.equal(st.writes.length, 0);
  // The list shows it, marked.
  await b.evaluate(`location.hash = '#/orgs/acme/workflows'`);
  await wait(`document.querySelector('[data-wfg-item="release"] [data-wfg-unsaved]')`, 'listed unsaved');
  await b.evaluate(press('[data-wfg-item="release"] a[data-wfg-open]'));
  await wait(`${boxes}.length === 1 && document.querySelector('[data-wfg-save]')`, 'back in the graph');
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/Saved release\\./.test(${text('[data-wfg-status]')}) && document.querySelector('[data-wfg-delete]')`, 'saved');
  assert.deepEqual(st.writes[0].args, { revision: REV_A, name: 'release', workflow: { steps: [{ title: 'Cut the release', state: 'todo', roles: ['human'] }] } });
  // Delete asks first; Keep keeps it.
  await b.evaluate(press('[data-wfg-delete]'));
  await wait(`document.querySelector('[data-wfg-confirm]')`, 'confirm');
  assert.match(await b.evaluate(text('[data-wfg-confirm]')), /Delete release from the organization file\?/);
  assert.equal(await b.evaluate(`document.activeElement.dataset.focusKey`), 'wfg-delete-no');
  await b.evaluate(press('[data-wfg-delete-no]'));
  await wait(`!document.querySelector('[data-wfg-confirm]') && document.activeElement?.dataset.focusKey === 'wfg-delete'`, 'kept');
  assert.equal(st.writes.length, 1);
  const saved = st.revs.acme;
  await b.evaluate(press('[data-wfg-delete]'));
  await wait(`document.querySelector('[data-wfg-delete-yes]')`, 'confirm again');
  await b.evaluate(press('[data-wfg-delete-yes]'));
  await wait(`location.hash === '#/orgs/acme/workflows' && /Deleted release\\./.test(${text('[data-wfg-list] [data-wfg-status]')}) && !document.querySelector('[data-wfg-item="release"]')`, 'deleted');
  assert.deepEqual(st.writes[1].args, { revision: saved, name: 'release', workflow: null });
  assert.equal(Object.hasOwn(st.docs.acme.workflows, 'release'), false);
});

test('the keyboard alone opens a step, edits it and saves', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site' });
  await wait(`${boxes}.length === 2`, 'graph');
  await b.evaluate(`document.querySelector('[data-wfg-step="1"]').focus();true`);
  await b.key('Enter');
  await wait(`document.querySelector('[data-wfg-detail-title]')?.textContent === 'Build' && document.activeElement?.dataset.focusKey === 'wfg-step:1'`, 'Enter opens step 1');
  const tabTo = async (sel, what) => {
    for (let i = 0; i < 20; i++) { if (await b.evaluate(`document.activeElement?.matches(${JSON.stringify(sel)}) ?? false`)) return; await b.key('Tab'); }
    throw new Error(`Tab never reached ${what}`);
  };
  await tabTo('[data-wfg-edit]', 'Edit step');
  await b.key('Enter');
  await wait(`document.querySelector('[data-wfg-form-title]')?.textContent === 'Edit step 1' && document.activeElement?.dataset.focusKey === 'wfg-f-title'`, 'form with focus on the title');
  await b.call('Input.insertText', { text: ' now' });
  await tabTo(`[data-wfg-form] input[name="role"][value="reviewer"]`, 'the reviewer box');
  await b.key(' ', 'Space');
  await tabTo('[data-wfg-apply]', 'Apply');
  await b.key('Enter');
  await wait(`${titles}[0] === 'Build now' && document.activeElement?.dataset.focusKey === 'wfg-save'`, 'applied, focus on Save');
  await b.key('Enter');
  await wait(`/Saved change\\./.test(${text('[data-wfg-status]')})`, 'saved');
  assert.deepEqual(st.writes[0].args, { revision: REV_A, name: 'change', project: 'site', workflow: { title: 'Site release', steps: [
    { title: 'Build now', state: 'in-progress', roles: ['coder', 'reviewer'] }, { title: 'Ship', state: 'done', roles: ['human'] }] } });
});

test('switching organization with a pending workflow change asks first, through the existing draft guard', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site&step=1' });
  await wait(`document.querySelector('[data-wfg-edit]') && document.querySelector('#breadcrumbs [data-crumb-org]')`, 'step 1');
  await b.evaluate(press('[data-wfg-remove]'));
  await wait(`${boxes}.length === 1 && document.querySelector('[data-wfg-unsaved]')`, 'pending removal');
  assert.equal(await b.evaluate(`window.MosaicWorkflows.hasDraft()`), true);
  await b.evaluate(`location.hash = '#/orgs/bare/workflows'`);
  await wait(`document.querySelector('dialog[aria-label="Unsaved draft"][open]')`, 'guard dialog');
  await b.evaluate(press('dialog [data-stay]'));
  await wait(`!document.querySelector('dialog[open]') && /#\\/orgs\\/acme\\/workflows\\/change/.test(location.hash) && ${boxes}.length === 1`, 'stayed with the change');
  await b.evaluate(`location.hash = '#/orgs/bare/workflows'`);
  await wait(`document.querySelector('dialog[aria-label="Unsaved draft"][open]')`, 'guard dialog again');
  await b.evaluate(press('dialog [data-discard]'));
  await wait(`location.hash === '#/orgs/bare/workflows' && document.querySelector('[data-wfg-list][data-wfg-org="bare"]')`, 'switched');
  assert.equal(await b.evaluate(`window.MosaicWorkflows.hasDraft()`), false);
  assert.equal(st.writes.length, 0);
});

test('Save with a step form holding edits not applied refuses in words and sends nothing; after Apply it sends them', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site&step=2' });
  await wait(`document.querySelector('[data-wfg-up]')`, 'step 2');
  // One change pending, so Save shows; then a step form is opened and typed in, not applied.
  await b.evaluate(press('[data-wfg-up]'));
  await wait(`${titles}[0] === 'Ship' && document.querySelector('[data-wfg-save]')`, 'moved');
  await b.evaluate(press('[data-wfg-edit]'));
  await wait(`document.querySelector('[data-wfg-form]')`, 'form');
  await b.evaluate(fill('[data-wfg-form] input[name="title"]', 'Ship the release'));
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/Apply or cancel the step first/.test(${text('[data-wfg-status]')})`, 'save refused');
  assert.equal(await b.evaluate(text('[data-wfg-status]')), 'Not saved: step 1 has edits not applied. Apply or cancel the step first.');
  assert.equal(st.writes.length, 0);
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-form] input[name="title"]')?.value`), 'Ship the release', 'the typed title stays');
  await b.evaluate(press('[data-wfg-apply]'));
  await wait(`${titles}[0] === 'Ship the release'`, 'applied');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-status]')`), null, 'Apply clears the refusal');
  await b.evaluate(press('[data-wfg-save]'));
  await wait(`/Saved change\\./.test(${text('[data-wfg-status]')})`, 'saved');
  assert.equal(st.writes.length, 1);
  assert.deepEqual(st.writes[0].args.workflow.steps.map(s => s.title), ['Ship the release', 'Build']);
});

test('Delete on a view another writer has changed is refused, not deleted over', { timeout: 60000 }, async t => {
  const { b, wait, st, reads } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site&step=1' });
  await wait(`document.querySelector('[data-wfg-remove]')`, 'step 1');
  await b.evaluate(press('[data-wfg-remove]'));
  await wait(`${boxes}.length === 1 && document.querySelector('[data-wfg-unsaved]')`, 'pending removal');
  st.change('acme', doc => { doc.projects.site.workflows.change.description = 'Changed elsewhere.'; });
  const n = reads.length;
  await b.evaluate(`document.dispatchEvent(new CustomEvent('mosaic-workspace-render'));true`);
  await wait(`!!document.querySelector('[data-wfg-stale]')`, 'stale note');
  assert.ok(reads.length > n);
  await b.evaluate(press('[data-wfg-delete]'));
  await wait(`document.querySelector('[data-wfg-delete-yes]')`, 'confirm');
  await b.evaluate(press('[data-wfg-delete-yes]'));
  await wait(`/^Not deleted/.test(${text('[data-wfg-status]')})`, 'delete refused');
  assert.equal(await b.evaluate(text('[data-wfg-status]')), 'Not deleted: the organization file changed this workflow since the page read it. Discard to load the current version.');
  assert.equal(st.writes.length, 1);
  assert.equal(st.writes[0].args.revision, REV_A);
  assert.equal(st.writes[0].args.workflow, null);
  assert.equal(st.docs.acme.projects.site.workflows.change.description, 'Changed elsewhere.', 'the newer workflow is still in the file');
  assert.ok(await b.evaluate(`${boxes}.length === 1 && !!document.querySelector('[data-wfg-unsaved]')`), 'the pending change stays');
  // With no pending change there is no Discard, so the refusal does not point at one.
  await b.evaluate(press('[data-wfg-discard]'));
  await wait(`${boxes}.length === 2 && !document.querySelector('[data-wfg-unsaved]')`, 'discarded');
  await b.evaluate(press('[data-wfg-delete]'));
  await wait(`document.querySelector('[data-wfg-delete-yes]')`, 'confirm again');
  st.change('acme', doc => { doc.projects.site.workflows.change.description = 'Changed again.'; });
  await b.evaluate(press('[data-wfg-delete-yes]'));
  await wait(`/^Not deleted/.test(${text('[data-wfg-status]')})`, 'second delete refused');
  assert.equal(await b.evaluate(text('[data-wfg-status]')), 'Not deleted: the organization file changed this workflow since the page read it. The page shows the current version at its next read.');
  assert.equal(await b.evaluate(`document.querySelector('[data-wfg-discard]')`), null);
  assert.equal(st.docs.acme.projects.site.workflows.change.description, 'Changed again.');
});

test('a failed read says a pending change is kept, and it comes back when the read works', { timeout: 60000 }, async t => {
  const { b, wait, st } = await setup(t, { path: '#/orgs/acme/workflows/change?project=site&step=1' });
  await wait(`document.querySelector('[data-wfg-remove]')`, 'step 1');
  await b.evaluate(press('[data-wfg-remove]'));
  await wait(`${boxes}.length === 1 && document.querySelector('[data-wfg-unsaved]')`, 'pending removal');
  st.failRead = true;
  await b.evaluate(`document.dispatchEvent(new CustomEvent('mosaic-workspace-render'));true`);
  await wait(`!!document.querySelector('[data-wfg-error]') && !!document.querySelector('[data-wfg-held]')`, 'error with kept note');
  assert.equal(await b.evaluate(text('[data-wfg-held]')), 'Unsaved change to change is kept on this page. It comes back when the workflows can be read.');
  assert.equal(await b.evaluate(`window.MosaicWorkflows.hasDraft()`), true);
  st.failRead = false;
  await b.evaluate(`document.dispatchEvent(new CustomEvent('mosaic-workspace-render'));true`);
  await wait(`${boxes}.length === 1 && !!document.querySelector('[data-wfg-unsaved]') && !document.querySelector('[data-wfg-held]')`, 'back');
  assert.equal(st.writes.length, 0);
});