Warm recipient portraits from Send suggestions before selection

1 files changed, 103 insertions, 0 deletions

diff --git a/tools/send-avatar-loading-test.js b/tools/send-avatar-loading-test.js
new file mode 100644
index 0000000..daedb7c
--- /dev/null
+++ b/tools/send-avatar-loading-test.js
@@ -0,0 +1,103 @@
+// Real recipient portraits and profile fetches with controlled relay answers.
+// Run: bun tools/send-avatar-loading-test.js
+import assert from 'node:assert/strict';
+import puppeteer from 'puppeteer-core';
+
+const app = await Bun.file('src/app.js').text();
+const domHelper = app.slice(app.indexOf('function h(tag,'), app.indexOf('// ---------------------------------------------------------------- morphing'));
+const entry = `
+import { messagesFeature } from './src/features/messages.js';
+${domHelper}
+const plans = new Map(), trace = [];
+let feature, recipient;
+const wallet = { nostr: { pk: 'f'.repeat(64) }, loadFeatureState: () => ({}), saveFeatureState() {}, registerCacheExtension() {} };
+window.avatarLookup = async (filter) => {
+  if (!filter.kinds.includes(0)) return [];
+  return (await Promise.all((filter.authors || []).map(pk => plans.get(pk)?.answer || []))).flat();
+};
+function render() {
+  if (!recipient) return;
+  const portrait = feature.profileChip(recipient, 'lg');
+  document.querySelector('#recipient').replaceChildren(portrait);
+  trace.push({ punk: !!portrait.querySelector('.punk'), loading: !!portrait.querySelector('.loading') });
+}
+feature = messagesFeature({ h, wallet, ui: { screen: 'wallet' }, render, hook: () => false });
+window.test = {
+  start(pk, loadingName = false, expiredWait = false) {
+    let finish;
+    plans.set(pk, { answer: new Promise(resolve => finish = resolve), finish: result => finish(result) });
+    if (loadingName) feature.testSeed(pk, { name: 'Recipient', t: 0, loading: true });
+    if (expiredWait) feature.testExpiredWait(pk);
+    recipient = pk; trace.length = 0; render();
+  },
+  complete(pk, profile) {
+    plans.get(pk).finish(profile === null ? [] : [{ pubkey: pk, created_at: Math.floor(Date.now()/1000), content: JSON.stringify(profile) }]);
+  },
+  cached(pk, profile) { feature.testSeed(pk, { ...profile, t: Date.now() }); recipient = pk; render(); },
+  get trace() { return trace; }, render,
+  small(pk) { document.querySelector('#small').replaceChildren(feature.testAvatar(pk, 'chat-avatar mini', false)); },
+};
+`;
+const bundle = await Bun.build({ entrypoints: ['avatar-test-entry'], target: 'browser', plugins: [{ name: 'avatar-test', setup(build) {
+  build.onResolve({ filter: /^avatar-test-entry$/ }, () => ({ path: 'entry', namespace: 'avatar-test' }));
+  build.onLoad({ filter: /.*/, namespace: 'avatar-test' }, () => ({ contents: entry, loader: 'js', resolveDir: process.cwd() }));
+  build.onLoad({ filter: /src\/features\/messages\.js$/ }, async ({ path }) => ({ loader: 'js',
+    contents: (await Bun.file(path).text()).replace("id: 'messages',", `id: 'messages',
+      testSeed: (pk, p) => profiles.set(pk, p),
+      testExpiredWait: (pk) => faceAsked.set(pk, Date.now() - 10000), testAvatar: avatar,`),
+  }));
+  build.onLoad({ filter: /src\/nostr\.js$/ }, async ({ path }) => ({ loader: 'js',
+    contents: (await Bun.file(path).text()).replace('export async function queryOn(relays, filter, maxWait = 1500) {',
+      'export async function queryOn(relays, filter, maxWait = 1500) { return window.avatarLookup(filter);'),
+  }));
+} }] });
+assert(bundle.success, bundle.logs.join('\n'));
+const html = `<!doctype html><meta charset="utf-8"><style>${await Bun.file('src/style.css').text()}</style><div id="recipient"></div><div id="small"></div><script type="module">${await bundle.outputs[0].text()}</script>`;
+const server = Bun.serve({ port: 0, fetch(req) {
+  const path = new URL(req.url).pathname;
+  if (/^\/punks\/\d+\.webp$/.test(path)) return new Response(Bun.file('static' + path));
+  return path === '/' ? new Response(html, { headers: { 'content-type': 'text/html' } }) : new Response(null, { status: 404 });
+} });
+const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: true, args: ['--no-sandbox'] });
+try {
+  const page = await browser.newPage(), errors = [];
+  page.on('pageerror', e => errors.push(e.message));
+  await page.setRequestInterception(true);
+  page.on('request', r => r.url().startsWith(server.url.origin) ? r.continue() : r.abort());
+  await page.goto(server.url.href);
+  await page.waitForFunction(() => window.test);
+  const state = () => page.$eval('.send-avatar', e => ({ loading: e.classList.contains('loading'), punk: !!e.querySelector('.punk'), picture: e.style.backgroundImage, hidden: getComputedStyle(e).visibility === 'hidden' }));
+  const pause = ms => new Promise(resolve => setTimeout(resolve, ms));
+  for (const [i, loadingName, expiredWait] of [[1, false, false], [2, true, false], [3, true, true]]) {
+    const pk = String(i).repeat(64);
+    await page.evaluate(([pk, name, expired]) => test.start(pk, name, expired), [pk, loadingName, expiredWait]);
+    assert.deepEqual(await state(), { loading: true, punk: false, picture: '', hidden: true }, 'cold lookup paints no visible placeholder');
+    await pause(1350);
+    await page.evaluate(() => test.render());
+    assert.deepEqual(await state(), { loading: true, punk: false, picture: '', hidden: true }, 'slow metadata lookup never times out into punk art');
+    await page.evaluate(pk => test.complete(pk, { name: 'Recipient', picture: '/punks/18.webp' }), pk);
+    await page.waitForSelector('.send-avatar.ava-img');
+    assert((await state()).picture.includes('/punks/18.webp'));
+    assert(await page.evaluate(() => test.trace.every(frame => !frame.punk)), 'no fallback punk appeared before the real picture');
+  }
+  console.log('✓ Cold, name-only and previously timed-out recipients show no placeholder before their picture arrives');
+
+  await page.evaluate(() => test.cached('4'.repeat(64), { name: 'Cached', picture: '/punks/54.webp' }));
+  assert((await state()).picture.includes('/punks/54.webp'));
+  assert.equal((await state()).loading, false);
+  console.log('✓ Cached recipient pictures appear immediately');
+
+  for (const [i, loadingName, result] of [[5, false, { name: 'No picture' }], [6, false, null], [7, true, null]]) {
+    const pk = String(i).repeat(64);
+    await page.evaluate(([pk, name]) => test.start(pk, name), [pk, loadingName]);
+    await page.evaluate(([pk, result]) => test.complete(pk, result), [pk, result]);
+    await page.waitForSelector('.send-avatar .punk');
+    assert.equal((await state()).loading, false, 'finished or missing profile uses its actual fallback');
+  }
+  console.log('✓ Profiles without pictures and failed lookups settle into their fallback avatar');
+
+  await page.evaluate(() => test.small('8'.repeat(64)));
+  assert(await page.$('#small .punk'), 'compact avatars retain their immediate fallback');
+  assert.deepEqual(errors, []);
+  console.log('✓ Compact avatars keep existing behavior; no browser errors');
+} finally { await browser.close(); server.stop(true); }