Add isolated browser diagnostics using existing review images

apps/waterfall-wiki/tests/canvas-ui-integration.ts

@@ -1,5 +1,7 @@
 import assert from 'node:assert/strict';
-import {randomUUID} from 'node:crypto';
+import {randomUUID,createHash} from 'node:crypto';
+import {createRequire} from 'node:module';
+import {availableParallelism,loadavg,freemem,totalmem} from 'node:os';
 import {chromium,type Request} from 'playwright-core';
 import {db} from '../src/lib/db';
 import {hashPassword,ACCOUNT_COOKIE} from '../src/lib/account-crypto';
@@ -8,18 +10,28 @@ export async function verifyCanvasAgentUI(base:string){
  assert.equal(process.env.PROMPT_INTEGRATION_TEST,'1');
  const owner=randomUUID(),email=owner+'@example.com',password='Canvas integration example1!';
  await db().query("INSERT INTO account_users(id,email,password_hash,verified_at) VALUES($1,$2,$3,now())",[owner,email,await hashPassword(password)]);
+ const probe=async(url:string)=>{
+  const started=Date.now();
+  try{const response=await fetch(url,{signal:AbortSignal.timeout(5000)});const body=await response.text();return {status:response.status,type:response.headers.get('content-type'),bytes:Buffer.byteLength(body),sha256:createHash('sha256').update(body).digest('hex'),ms:Date.now()-started}}
+  catch(error){return {error:error instanceof Error?error.message:String(error),ms:Date.now()-started}}
+ };
+ const html=await fetch(base+'/infinite_canvas',{signal:AbortSignal.timeout(10000)}).then(r=>r.text());
+ const scripts=[...html.matchAll(/<script[^>]+src="([^"?]+)[^">]*"/g)].map(match=>match[1]);
+ console.log('Canvas script proxy comparison',JSON.stringify(await Promise.all(scripts.map(async path=>({path,proxy:await probe(base+path),direct:await probe('http://prompt-studio:3000'+path)})))));
  const browser=await chromium.launch({executablePath:process.env.CHROMIUM_PATH||'/usr/bin/chromium',headless:true,args:['--no-sandbox','--disable-dev-shm-usage']});
+ console.log('Canvas browser environment',JSON.stringify({browser:browser.version(),playwright:createRequire(import.meta.url)('playwright-core/package.json').version,node:process.version,cpu:availableParallelism(),load:loadavg(),freeMemory:freemem(),totalMemory:totalmem()}));
  const context=await browser.newContext({viewport:{width:1440,height:1000}}),errors:string[]=[];
  const page=await context.newPage(),canvasRequests:string[]=[],pending=new Set<Request>(),network:string[]=[];
+ const resources:{ms:number;event:string;path:string;status?:number;type?:string;duration?:number}[]=[],requestStarts=new Map<Request,number>();
  const started=Date.now(),navigation:{ms:number;event:string;path:string}[]=[];
  const mark=(event:string)=>{navigation.push({ms:Date.now()-started,event,path:new URL(page.url()).pathname});if(navigation.length>60)navigation.shift()};
  page.on('framenavigated',frame=>{if(frame===page.mainFrame())mark('framenavigated')});
  page.on('domcontentloaded',()=>mark('domcontentloaded'));page.on('load',()=>mark('load'));
  const requestName=(request:{method:()=>string;url:()=>string})=>request.method()+' '+new URL(request.url()).pathname;
- page.on('request',request=>pending.add(request));
+ page.on('request',request=>{pending.add(request);requestStarts.set(request,Date.now())});
  page.on('requestfinished',request=>pending.delete(request));
  page.on('requestfailed',request=>{pending.delete(request);network.push(requestName(request)+': '+request.failure()?.errorText)});
- page.on('response',response=>{const url=new URL(response.url());if(url.pathname.startsWith('/api/canvases'))canvasRequests.push(`${response.request().method()} ${url.pathname} ${response.status()}`)});
+ page.on('response',response=>{const url=new URL(response.url());if(url.pathname.includes('/_next/')||url.pathname==='/api/account/session'){resources.push({ms:Date.now()-started,event:'response',path:url.pathname,status:response.status(),type:response.headers()['content-type'],duration:Date.now()-(requestStarts.get(response.request())||Date.now())});if(resources.length>100)resources.shift()}if(url.pathname.startsWith('/api/canvases'))canvasRequests.push(`${response.request().method()} ${url.pathname} ${response.status()}`)});
  try{
   page.setDefaultTimeout(20000);page.on('pageerror',e=>errors.push(e.message));
   mark('open landing');await page.goto(base+'/',{waitUntil:'domcontentloaded'});
@@ -110,8 +122,8 @@ export async function verifyCanvasAgentUI(base:string){
  }catch(error){
   const statuses=await page.getByRole('status').allTextContents().catch(()=>[]);
   const headings=await page.getByRole('heading').allTextContents().catch(()=>[]);
-  const documentState=await page.evaluate(()=>({readyState:document.readyState,navigation:performance.getEntriesByType('navigation').map(entry=>{const timing=entry as PerformanceNavigationTiming;return {type:timing.type,domContentLoadedEventEnd:timing.domContentLoadedEventEnd,loadEventEnd:timing.loadEventEnd}})})).catch(()=>null);
-  console.error('Canvas agent UI diagnostics',JSON.stringify({url:page.url(),browserConnected:browser.isConnected(),headings,statuses,documentState,navigation,pending:[...pending].map(requestName),network:network.slice(-20),canvasRequests:canvasRequests.slice(-20),errors}));
+  const documentState=await page.evaluate(()=>({readyState:document.readyState,navigation:performance.getEntriesByType('navigation').map(entry=>{const timing=entry as PerformanceNavigationTiming;return {type:timing.type,domContentLoadedEventEnd:timing.domContentLoadedEventEnd,loadEventEnd:timing.loadEventEnd}}),nextData:(()=>{const element=document.getElementById('__NEXT_DATA__');const data=element?JSON.parse(element.textContent||'{}'):{};return {page:data.page,buildId:data.buildId,assetPrefix:data.assetPrefix}})(),runtime:(()=>{const state=window as unknown as {next?:{router?:{isReady?:boolean}};__MIDDLEWARE_MATCHERS?:unknown;__SSG_MANIFEST?:unknown};return {routerReady:state.next?.router?.isReady,middleware:!!state.__MIDDLEWARE_MATCHERS,ssgManifest:!!state.__SSG_MANIFEST}})(),resources:performance.getEntriesByType('resource').map(entry=>({path:new URL(entry.name).pathname,start:entry.startTime,duration:entry.duration}))})).catch(()=>null);
+  console.error('Canvas agent UI diagnostics',JSON.stringify({url:page.url(),browserConnected:browser.isConnected(),headings,statuses,documentState,navigation,resources,pending:[...pending].map(requestName),network:network.slice(-20),canvasRequests:canvasRequests.slice(-20),errors}));
   throw error;
  }finally{await context.close();await browser.close()}
 }