Made of little things.

import {seedSyntheticCase} from './synthetic-case-ui.mjs';
import assert from 'node:assert/strict';
import {createRequire} from 'node:module';
import {realpathSync} from 'node:fs';
import {mkdir,writeFile} from 'node:fs/promises';
import {execFileSync} from 'node:child_process';
const require=createRequire(realpathSync('node_modules/@napplet/conformance-cli/package.json'));
const {chromium}=require('playwright');
const info=JSON.parse(execFileSync('soyli',['browser','path','--json'],{encoding:'utf8'}));
const browser=await chromium.launch({executablePath:info.executables.find(e=>e.name==='chromium'&&e.installed).path,headless:true});
const output='.napplet-space/layer-checks';await mkdir(output,{recursive:true});
try{
 const context=await browser.newContext({viewport:{width:1600,height:1000}}),page=await context.newPage(),errors=[];
 page.on('pageerror',e=>errors.push(e.message));await page.goto(process.argv[2]);
 const iframe=page.locator('iframe');await iframe.waitFor();
 const size=async(w,h)=>{await page.setViewportSize({width:w,height:h});await iframe.evaluate((e,[w,h])=>e.style.cssText=`position:fixed;inset:0;width:${w}px;height:${h}px;z-index:9999;border:0`,[w,h]);};
 await size(1600,1000);let f=await(await iframe.elementHandle()).contentFrame();await f.locator('#app[data-ready="true"]').waitFor();
 await seedSyntheticCase(f);
 await f.locator('#anatomyLayer').selectOption('skeleton');await f.locator('[data-view="front"]').click();await f.locator('button[data-mode="paint"]').click();
 assert.equal(await f.locator('.body-pin:visible').count(),0,'Skin pins are hidden on skeleton');
 const box=await f.locator('canvas').boundingBox();let found=false;
 outer:for(const y of [.57,.60,.63,.66,.54])for(const x of [.55,.56,.57,.58,.59,.54]){
  await page.mouse.move(box.x+box.width*x,box.y+box.height*y);
  if((await f.locator('#sceneHint').innerText()).startsWith('Left femur')){await page.mouse.click(box.x+box.width*x,box.y+box.height*y);found=true;break outer;}
 }
 assert.ok(found,'Pick the real left femur');assert.equal(await f.locator('#concernCount').innerText(),'3','Changing layer starts a separate observation');
 assert.equal(await f.locator('#location').inputValue(),'Left femur');
 await f.locator('#description').fill('Synthetic bone-layer observation.');await f.locator('[data-pose="sitting"]').click();
 await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/skeleton-sitting.png`});
 await f.locator('#concern-toggle-1').click();assert.equal(await f.locator('#anatomyLayer').inputValue(),'skin');
 assert.equal(await f.locator('[data-pose="standing"]').getAttribute('aria-pressed'),'true');
 await f.locator('#concern-toggle-3').click();assert.equal(await f.locator('#anatomyLayer').inputValue(),'skeleton');
 assert.equal(await f.locator('[data-pose="sitting"]').getAttribute('aria-pressed'),'true');
 await f.waitForFunction(()=>document.querySelector('#sessionStatus').textContent==='Session saved');await page.reload();await iframe.waitFor();await size(1600,1000);
 f=await(await iframe.elementHandle()).contentFrame();await f.locator('#app[data-ready="true"]').waitFor();
 assert.equal(await f.locator('#anatomyLayer').inputValue(),'skeleton');assert.equal(await f.locator('#location').inputValue(),'Left femur');
 assert.equal(await f.locator('#description').inputValue(),'Synthetic bone-layer observation.');
 for(const [layer,label,id,pose] of [['muscles','Left rectus femoris',4,'walking'],['organs','Stomach',5,'lying']]){
  await f.locator('#anatomyLayer').selectOption(layer);await f.locator('[data-pose="standing"]').click();await f.locator('[data-view="front"]').click();await f.locator('button[data-mode="paint"]').click();
  await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/${layer}-front.png`});
  const box=await f.locator('canvas').boundingBox();let found=false;
  const ys=layer==='muscles'?[.57,.60,.63,.54,.66]:[.41,.44,.47,.38,.50,.35];
  const xs=layer==='muscles'?[.55,.56,.57,.58,.59,.54]:[.53,.55,.51,.57,.49,.59,.47,.45];
  outer:for(const y of ys)for(const x of xs){
   await page.mouse.move(box.x+box.width*x,box.y+box.height*y);
   if((await f.locator('#sceneHint').innerText()).startsWith(label)){await page.mouse.click(box.x+box.width*x,box.y+box.height*y);found=true;break outer;}
  }
  assert.ok(found,`Pick ${label} in ${layer}`);assert.equal(await f.locator('#concernCount').innerText(),String(id));
  await f.locator('#description').fill(`Synthetic ${layer} observation.`);await f.locator(`[data-pose="${pose}"]`).click();
  await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/${layer}-${pose}.png`});
  await f.locator('[data-view="back"]').click();await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/${layer}-back.png`});await f.locator('[data-view="front"]').click();
 }
 await f.locator('#concern-toggle-4').click();assert.equal(await f.locator('#anatomyLayer').inputValue(),'muscles');assert.equal(await f.locator('[data-pose="walking"]').getAttribute('aria-pressed'),'true');
 await f.locator('#concern-toggle-5').click();
 await f.waitForFunction(()=>document.querySelector('#sessionStatus').textContent==='Session saved');await page.reload();await iframe.waitFor();await size(1600,1000);
 f=await(await iframe.elementHandle()).contentFrame();await f.locator('#app[data-ready="true"]').waitFor();
 assert.equal(await f.locator('#anatomyLayer').inputValue(),'organs');assert.equal(await f.locator('#location').inputValue(),'Stomach');assert.equal(await f.locator('#description').inputValue(),'Synthetic organs observation.');
 await f.locator('#connectionsButton').click();await f.locator('#apiKey').fill('dummy-layer-test');await f.locator('#bridgePubkey').fill('a'.repeat(64));await f.locator('#bridgeTrust').check();await f.locator('#closeModal').click();
 await f.locator('[data-page="review"]').first().click();await f.locator('[data-ai="request"]').click();
 assert.equal(await f.locator('.evidence-gallery img').count(),4);
 const captions=await f.locator('.evidence-gallery figcaption').allTextContents();assert.match(captions[0],/Skin illustration layer.*Saved standing pose/);assert.match(captions[1],/Skeleton illustration layer.*Saved sitting pose/);
 assert.match(captions[2],/Muscles illustration layer.*Saved walking pose/);assert.match(captions[3],/Organs illustration layer.*Saved lying pose/);
 for(let i=0;i<4;i++){const data=await f.locator('.evidence-gallery img').nth(i).getAttribute('src');await writeFile(`${output}/evidence-${i+1}.jpg`,Buffer.from(data.split(',')[1],'base64'));}
 await f.locator('.request-details').first().locator('summary').click();assert.match(await f.locator('.request-details pre').first().innerText(),/"illustratedLayer": "skeleton"/);
 assert.equal(await f.locator('[data-ai="send"]').count(),0,'No unverified image send');await f.locator('#closeModal').click();await f.locator('[data-page="map"]').first().click();
 assert.equal(await f.locator('#anatomyLayer').inputValue(),'organs');assert.equal(await f.locator('#bodyViewport').getAttribute('data-layer'),'organs');assert.equal(await f.locator('[data-pose="lying"]').getAttribute('aria-pressed'),'true','Capture restores view');
 await f.locator('[data-pose="standing"]').click();await f.locator('[data-view="left"]').click();await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/organs-side.png`});
 for(const [w,h] of [[900,600],[320,560],[390,844],[844,390],[200,160]]){
  await size(w,h);if(w<280||h<280){assert.ok(await f.locator('.minimum-notice').isVisible());continue;}
  if(w<761&&h>440)await f.locator('button[data-panel="body"]').click();
  const control=f.locator('#anatomyLayer');assert.ok(await control.isVisible());for(const layer of ['skin','skeleton','muscles','organs'])await control.selectOption(layer);
  assert.ok(await control.evaluate(e=>{const b=e.getBoundingClientRect();return b.left>=0&&b.top>=0&&b.right<=innerWidth&&b.bottom<=innerHeight;}));
  await f.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));await page.screenshot({path:`${output}/layers-${w}x${h}.png`});
 }
 assert.deepEqual(errors,[]);console.log('PASS: four isolated layers, named bone/muscle/organ picking, independent observation/pose, reload, per-layer evidence, restored view and responsive layer controls; no provider requests.');
}finally{await browser.close();}