Cordn group chats: MLS groups delivered through a coordinator (Amethyst 1.17 interop)

src/contextvm.js speaks ContextVM (kind 25910 inside ephemeral gift wraps)
to a coordinator; src/cordn.js is the protocol (KeyPackages with hex-text
identities, the 0xC04D metadata extension, exporter-keyed ChaCha20 sealing,
unsigned nostr-shaped envelopes with the sender as MLS AAD, cordn1 group
refs, a record engine like marmot.js); src/cordn-client.js mirrors
marmot-client.js with the same interface, so the Messages group screens
drive both — New group gains a White Noise / Cordn toggle.

Verified against @cordn/cli (ts-mls) on the public coordinator both ways,
from the engine (tools/cordn-interop-test.js) and from the real app
(tools/cordn-ui-test.js). mls.js: the OpenMLS required_capabilities rule for
GroupContextExtensions now applies only to groups that carry one.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01YRC6aKhwAud231ot9FPmhi

1 files changed, 89 insertions, 0 deletions

diff --git a/tools/cordn-ui-test.js b/tools/cordn-ui-test.js
new file mode 100644
index 0000000..6948428
--- /dev/null
+++ b/tools/cordn-ui-test.js
@@ -0,0 +1,89 @@
+// Cordn in the app, end to end, against the public coordinator: a fresh
+// wallet makes a Cordn group from Messages → New group, invites Alice (the
+// official @cordn/cli), sends; Alice's CLI accepts the Welcome, reads it and
+// answers; the app shows her answer. Needs the CLI rig (see
+// cordn-interop-test.js).
+//
+// Run: bun tools/cordn-ui-test.js [screenshot.png]
+import puppeteer from 'puppeteer-core';
+import { generateMnemonic } from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
+import { npubEncode } from 'nostr-tools/nip19';
+import { buildHtml } from '../build.js';
+
+const CLI_DIR = process.env.CORDN_CLI_DIR || '/tmp/claude-1000/-home-adam-coinosv3/77efc6a1-2602-46f7-b851-5580b0742cf1/scratchpad/cordn/cli';
+const CLI = `${CLI_DIR}/node_modules/.bin/cordn`;
+const ALICE_STATE = `${CLI_DIR}/alice.json`;
+const shotPath = process.argv[2] || '/tmp/cordn-ui-test.png';
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+let ok = true;
+const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; return c; };
+function alice(cmd) {
+  const p = Bun.spawnSync([CLI, '--state-file', ALICE_STATE, '--command', cmd], { timeout: 90_000, stdout: 'pipe', stderr: 'pipe' });
+  const out = (p.stdout.toString() + p.stderr.toString()).replace(/\x1b\[[0-9;]*m/g, '').trim();
+  console.log(`   [alice] ${cmd}\n      ${out.split('\n').slice(-4).join('\n      ')}`);
+  return out;
+}
+const apk = /stablePubkey:\s*([0-9a-f]{64})/.exec(alice('status'))?.[1];
+const aliceRef = /ref=([0-9a-f]{64})/.exec(alice('gen-kp kp' + Date.now().toString(36)))?.[1];
+
+const html = await buildHtml({ minify: true, pwa: false });
+const server = Bun.serve({ port: 5234, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) });
+const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] });
+const page = await browser.newPage();
+const errs = [];
+page.on('pageerror', (e) => { errs.push(e.message); console.log('  [pageerror]', e.message); });
+const click = (sel, t) => page.evaluate((s, x) => { const e = [...document.querySelectorAll(s)].find((n) => n.textContent.trim().toLowerCase() === x.toLowerCase()) || [...document.querySelectorAll(s)].find((n) => n.textContent.trim().toLowerCase().includes(x.toLowerCase())); if (e) { e.click(); return true; } return false; }, sel, t);
+const waitFor = async (fn, ms = 25000, arg) => { for (let i = 0; i < ms / 250; i++) { if (await page.evaluate(fn, arg)) return true; await sleep(250); } return false; };
+const bodyText = () => page.evaluate(() => document.body.innerText);
+
+try {
+  await page.setViewport({ width: 420, height: 860 });
+  await page.goto('http://localhost:5234/', { waitUntil: 'domcontentloaded' });
+  await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
+  await page.reload({ waitUntil: 'domcontentloaded' });
+  await sleep(400);
+  await click('button', 'Create a new wallet'); await sleep(300);
+  await click('button', 'Have an existing seed'); await sleep(300);
+  await page.waitForSelector('textarea');
+  await page.type('textarea', generateMnemonic(wordlist));
+  await click('button', 'Open wallet');
+  await waitFor(() => /receive/i.test(document.body.innerText), 15000);
+  await page.evaluate(() => [...document.querySelectorAll('.app-nav-button')].find((b) => /message/i.test(b.textContent))?.click());
+  check('messages screen', await waitFor(() => /New group/.test(document.body.innerText), 15000));
+
+  // New group → Cordn → Alice → create
+  await click('button', 'New group'); await sleep(300);
+  check('protocol choice shown', await waitFor(() => [...document.querySelectorAll('.seg button')].some((b) => b.textContent.trim() === 'Cordn'), 5000));
+  await click('.seg button', 'Cordn'); await sleep(200);
+  await page.type('input[placeholder="Group name"]', 'UI test group');
+  await page.type('input[placeholder^="Add people"]', npubEncode(apk));
+  await page.keyboard.press('Enter');
+  check('alice chip shows reachable', await waitFor(() => [...document.querySelectorAll('.chat-react.on')].some((c) => !/checking|can't/.test(c.textContent)), 30000), (await bodyText()).match(/checking…|can't join[^\n]*/)?.[0]);
+  await click('button', 'Create group');
+  check('group screen opened', await waitFor(() => !!document.querySelector('.chat-title') && /UI test group/.test(document.querySelector('.chat-title').textContent), 60000));
+  await page.type('#msg-draft', 'hello from the coinos app');
+  await click('button', 'Send');
+  check('our message is on screen', await waitFor(() => [...document.querySelectorAll('.chat-bubble')].some((b) => b.textContent.includes('hello from the coinos app')), 10000));
+
+  // Alice's side
+  alice('fetch-welcomes');
+  const id = alice('welcomes').split('\n').map((l) => /([0-9a-f]{64}:([0-9a-f]{64}):\d+)/.exec(l)).filter(Boolean).sort((a, b) => Number(b[1].split(':')[2]) - Number(a[1].split(':')[2]))[0]?.[1]; // the newest: the one just stored
+  check('alice got the Welcome', !!id);
+  const alias = 'ui' + Date.now().toString(36);
+  if (id) {
+    alice(`accept-welcome ${id} ${alias}`);
+    alice(`sync ${alias}`);
+    check("alice reads the app's message", alice(`messages ${alias}`).includes('hello from the coinos app'));
+    alice(`send-to ${alias} hello app, from the cli`);
+    check("the app shows alice's reply", await waitFor(() => [...document.querySelectorAll('.chat-bubble')].some((b) => b.textContent.includes('hello app, from the cli')), 30000));
+    check('member list shows both', await waitFor(() => /2 members/.test(document.body.innerText), 5000));
+  }
+  await sleep(500);
+  await page.screenshot({ path: shotPath });
+  // back home: the group row is in the list with the last message
+  await page.evaluate(() => document.querySelector('.chat-head button')?.click());
+  check('home lists the group', await waitFor(() => [...document.querySelectorAll('.chat-thread-row')].some((r) => /UI test group/.test(r.textContent)), 5000));
+  check('no page errors', errs.length === 0, errs.join(' | ').slice(0, 300));
+  console.log(ok ? '\nUI OK' : '\nFAILED');
+} finally { await browser.close(); server.stop(); process.exit(ok ? 0 : 1); }