app/tests/first-message.mjs

import { chromium } from 'playwright';
import fs from 'node:fs/promises';
import assert from 'node:assert/strict';

const url = process.argv[2] ?? 'http://127.0.0.1:4173/?source=local';
const label = process.argv[3] ?? 'agent-first-message';
const result = { date: new Date().toISOString(), url, checks: [], errors: [] };
const gpuArgs = ['--enable-unsafe-webgpu', '--use-angle=vulkan', '--enable-features=Vulkan', '--disable-vulkan-surface'];
let context, browser, page;
async function open() {
  page = await context.newPage(); page.on('pageerror', e => result.errors.push(e.stack));
  context.setDefaultTimeout(180_000);
  await page.goto(url); await page.waitForFunction(() => window.browserPi?.terminal);
  await page.evaluate(() => window.browserPi.ready);
  await page.evaluate(() => document.querySelector('#new-chat').onclick());
}
async function send(text, expectModal = true) {
  await page.locator('.xterm-helper-textarea').focus();
  if (text) await page.keyboard.type(text);
  await page.locator('#send').click();
  if (expectModal) await page.waitForFunction(() => document.querySelector('#model-dialog').open);
  else await page.waitForFunction(() => window.browserPi.busy || window.browserPi.loaded);
}
async function draft(text) {
  await page.waitForFunction(text => !document.querySelector('#model-dialog').open && window.browserPi.terminal.text === text, text);
}
try {
  // Real unsupported-GPU path: no fake model, worker, progress or failure events.
  browser = await chromium.launch({ executablePath: '/usr/bin/chromium', headless: true, args: ['--disable-gpu', '--disable-software-rasterizer'] });
  context = await browser.newContext({ viewport: { width: 1440, height: 1000 }, colorScheme: 'light' });
  const requests = []; context.on('request', r => requests.push(r.url()));
  await open();
  const prompt = 'Create a file called hello.txt containing Hello.';
  await send(prompt);
  assert.equal(await page.locator('#model-preview').textContent(), prompt);
  assert(await page.locator('#model-confirm').evaluate(el => el === document.activeElement));
  assert.equal(await page.evaluate(() => window.browserPi.loaded), false);
  assert.equal(requests.filter(u => /\.onnx|manifest\.json|tokenizer/.test(u)).length, 0);
  result.checks.push('First Send opens an accessible modal; no model download before confirmation');
  await page.locator('#model-cancel').focus();
  await page.keyboard.press('Tab'); assert(await page.locator('.setup-model .model-org').evaluate(el => el === document.activeElement));
  await page.keyboard.press('Shift+Tab'); assert(await page.locator('#model-cancel').evaluate(el => el === document.activeElement));
  await page.locator('#model-confirm').focus();
  for (const [width,height] of [[1440,1000],[850,640],[390,844],[320,568],[390,420]]) {
    await page.setViewportSize({width,height});
    const layout = await page.evaluate(() => {
      const rect=document.querySelector('#model-dialog').getBoundingClientRect();
      const actions=document.querySelector('.setup-actions').getBoundingClientRect();
      const selectors=['html','header','.model-panel','.workspace','.editor-area','.workspace > .terminal','#model-dialog','#model-preview'];
      return { inBounds:rect.x>=0 && rect.y>=0 && rect.right<=innerWidth && rect.bottom<=innerHeight && actions.top>=rect.top && actions.bottom<=rect.bottom,
        overflow:document.documentElement.scrollWidth>innerWidth,
        dark:getComputedStyle(document.documentElement).colorScheme==='dark',
        surfaces:selectors.map(s=>({selector:s,bg:getComputedStyle(document.querySelector(s)).backgroundColor})) };
    });
    assert(layout.inBounds && !layout.overflow && layout.dark);
    for(const surface of layout.surfaces) assert(surface.bg.match(/\d+/g).slice(0,3).every(n=>Number(n)<80),JSON.stringify(surface));
    if([1440,390,320].includes(width)) await page.screenshot({path:`../validation/${label}-modal-${width}x${height}.png`,fullPage:true});
  }
  result.checks.push('Focus stays in the modal; entire app remains dark under a light OS preference; five viewport sizes fit');
  await page.keyboard.press('Escape'); await draft(prompt);
  assert.equal(await page.locator('#notice').textContent(),'');
  await send(); await page.locator('#model-confirm').click();
  await page.waitForFunction(()=>!document.querySelector('#model-error').hidden);
  assert.match(await page.locator('#model-error').textContent(),/WebGPU/);
  assert.equal(await page.locator('#model-confirm').textContent(),'Try again');
  await page.locator('#model-confirm').click();
  await page.waitForFunction(()=>!document.querySelector('#model-error').hidden && !document.querySelector('#model-confirm').disabled);
  await page.screenshot({path:`../validation/${label}-error.png`,fullPage:true});
  await page.locator('#model-cancel').click(); await draft(prompt);
  assert.equal((await page.evaluate(()=>window.browserPi.rpc('snapshot'))).messages.length,0);
  result.checks.push('Escape and Cancel restore the draft; real unsupported-GPU error supports retry without sending');
  await context.close(); await browser.close(); context=undefined; browser=undefined;

  context = await chromium.launchPersistentContext(new URL('../../validation/agent-browser-profile',import.meta.url).pathname,
    { executablePath:'/usr/bin/chromium', headless:true, viewport:{width:1440,height:1000}, args:gpuArgs });
  await open();
  const nonce='FIRST-'+crypto.randomUUID().slice(0,8);
  await page.evaluate(nonce=>window.browserPi.rpc('write',{path:'/workspace/first-message.txt',content:nonce}),nonce);
  const task='Read first-message.txt using the read tool and tell me its exact contents.';
  const cached = await page.evaluate(()=>window.browserPi.rpc('cache_status'));
  await send(task, !cached);
  if (cached) await page.locator('#stop').click();
  else {
    await page.locator('#model-confirm').click();
    await page.waitForFunction(()=>window.browserPi.busy && !document.querySelector('#model-dialog').open && !document.querySelector('#progress').hidden);
    await page.locator('#stop').click();
  }
  await draft(task);
  await page.waitForFunction(()=>!window.browserPi.busy);
  assert.equal((await page.evaluate(()=>window.browserPi.rpc('snapshot'))).messages.length,0);
  result.checks.push('Cancelling real model setup waits for cleanup and restores the unsent message');
  const start=Date.now();
  const cachedOnRetry = await page.evaluate(()=>window.browserPi.rpc('cache_status'));
  await send(undefined, !cachedOnRetry);
  if (!cachedOnRetry) await page.locator('#model-confirm').click();
  await page.waitForFunction(()=>window.browserPi.loaded && window.browserPi.diagnostics.events.includes('agent_end') && !window.browserPi.busy);
  result.elapsedMs=Date.now()-start;
  const state=await page.evaluate(()=>window.browserPi.rpc('snapshot'));
  assert.equal(state.messages.filter(m=>m.role==='user').length,1);
  assert.equal(state.messages.find(m=>m.role==='user').content[0].text,task);
  assert(state.messages.some(m=>m.role==='toolResult' && m.toolName==='read' && !m.isError));
  assert(state.messages.filter(m=>m.role==='assistant').at(-1).content.some(c=>c.text?.includes(nonce)));
  assert.equal(await page.evaluate(()=>window.browserPi.terminal.text),'');
  assert.equal(await page.locator('#model-dialog').evaluate(el=>el.open),false);
  result.messages=state.messages;
  result.checks.push('Cached auto-start or download confirmation loads the actual model, sends exactly once and answers with an unseen file value');
  await page.screenshot({path:`../validation/${label}-desktop.png`,fullPage:true});
  await page.setViewportSize({width:390,height:844});
  await page.screenshot({path:`../validation/${label}-mobile.png`,fullPage:true});
  assert.equal(result.errors.length,0); result.passed=true;
  console.log(JSON.stringify({passed:true,checks:result.checks,elapsedMs:result.elapsedMs}));
} catch(error) { result.failure=error.stack; await page?.screenshot({path:`../validation/${label}-failure.png`,fullPage:true}); throw error; }
finally { await fs.writeFile(`../validation/${label}.json`,JSON.stringify(result,null,2)); await context?.close(); await browser?.close(); }