Made of little things.

import assert from 'node:assert/strict';
import { createRequire } from 'node:module';
import { realpathSync } from 'node:fs';
import { mkdir } from 'node:fs/promises';
import { execFileSync } from 'node:child_process';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
import { createBridge } from '../bridge/server.mjs';
import { detailedReport, noPhotoDisclaimer } from './report-fixture.mjs';
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/diagnostic-checks';await mkdir(output,{recursive:true});
let releaseModels,finishStream,modelMode='normal',modelReads=0,inferenceCalls=0,recoverable=false;
const recoveryReport=detailedReport([1,2,3]);recoveryReport.evidence.visual=[noPhotoDisclaimer];
const missingBrace=JSON.stringify(recoveryReport).replace('},"assessments":',',"assessments":');
const bridge=createBridge({fetchImpl:async(url,init)=>{
  if(init.method==='GET'){
    modelReads++;assert.equal(init.body,undefined);
    if(modelMode==='held')await new Promise(r=>{releaseModels=r;});
    if(modelMode==='error')return new Response('Denied',{status:401});
    return new Response(JSON.stringify({data:[{id:'provider-model-a'},{id:'provider-model-b'}]}));
  }
  inferenceCalls++;assert.equal(JSON.parse(init.body).stream,true);
  assert.equal(JSON.parse(init.body).response_format.type,'json_schema');
  assert.equal(JSON.parse(init.body).response_format.json_schema.schema.properties.evidence.properties.visual.maxItems,0);
  const encoder=new TextEncoder();
  const event=(delta,finish_reason=null)=>encoder.encode('data: '+JSON.stringify({model:'provider-model-b',id:'synthetic-response',choices:[{index:0,delta,finish_reason}]})+'\n\n');
  return new Response(new ReadableStream({start(c){
    c.enqueue(event({reasoning_content:'Synthetic provider reasoning, not a medical assessment. '.repeat(8)}));
    finishStream=()=>{c.enqueue(event({content:recoverable?missingBrace:'INVALID JSON <script>window.executed=true</script> dummy-diagnostic-key'},'stop'));c.enqueue(encoder.encode('data: [DONE]\n\n'));c.close();};
  }}),{headers:{'content-type':'text/event-stream'}});
}});
const [clientTransport,serverTransport]=InMemoryTransport.createLinkedPair();
const client=new Client({name:'diagnostic-ui-test',version:'1'});
const errors=[];let page;
try{
  await bridge.server.connect(serverTransport);await client.connect(clientTransport);
  page=await browser.newPage({viewport:{width:1600,height:1000}});page.on('pageerror',e=>errors.push(e.message));
  await page.exposeFunction('__diagnosticTool',(ref,tool,args)=>client.callTool({name:tool,arguments:args,_meta:{clientPubkey:'a'.repeat(64)}}));
  await page.goto(process.argv[2]);const iframe=page.locator('iframe');await iframe.waitFor();const f=await(await iframe.elementHandle()).contentFrame();await f.locator('#app[data-ready=true]').waitFor();
  // Only the CVM transport is replaced: the real bridge/provider run in-process,
  // while soyLI continues to supply actual storage and the sandbox/runtime.
  await f.evaluate(()=>{window.napplet.cvm={callTool:(ref,tool,args)=>window.__diagnosticTool(ref,tool,args),close:async()=>{}};});
  await f.locator('#examplesButton').click();await f.locator('[data-example-preview=longstanding]').click();await f.locator('[data-example-load=longstanding]').click();
  await f.locator('#connectionsButton').click();await f.locator('#apiKey').fill('dummy-diagnostic-key');await f.locator('#bridgePubkey').fill('a'.repeat(64));await f.locator('#bridgeTrust').check();
  await f.locator('[data-ai=models]').click();await f.waitForFunction(()=>document.querySelector('#modelDiscovery').textContent.includes('2 model IDs'));
  assert.equal(inferenceCalls,0);assert.equal(await f.locator('#connectionModel').inputValue(),'gpt-5.4');
  await f.locator('#connectionModelSelect').selectOption('provider-model-b');assert.equal(await f.locator('#connectionModel').inputValue(),'provider-model-b');
  await f.locator('#connectionModel').fill('custom-manual');assert.equal(await f.locator('#connectionModelSelect').inputValue(),'custom-manual');
  modelMode='held';await f.locator('[data-ai=models]').click();await f.waitForFunction(()=>document.querySelector('[data-ai=models]').disabled);
  await f.locator('[data-provider=kimi]').click();await f.locator('#apiKey').fill('new-test-key');releaseModels();modelMode='normal';
  await f.waitForFunction(()=>!document.querySelector('#modelDiscovery').textContent.includes('Loading models'));
  assert.equal(await f.locator('#connectionModelSelect option[value=provider-model-b]').count(),0,'Stale model list discarded after provider/key edit');
  await f.locator('[data-provider=openai]').click();await f.locator('#apiKey').fill('dummy-diagnostic-key');
  modelMode='error';await f.locator('[data-ai=models]').click();await f.waitForFunction(()=>document.querySelector('#modelDiscovery').textContent.includes('rejected'));
  assert.equal(await f.locator('#connectionModel').isEnabled(),true);modelMode='normal';
  await f.locator('[data-ai=models]').click();await f.waitForFunction(()=>document.querySelector('#modelDiscovery').textContent.includes('2 model IDs'));await f.locator('#connectionModelSelect').selectOption('provider-model-b');
  await f.locator('#saveConnection').click();await f.waitForFunction(()=>document.querySelector('#saveConnection').textContent==='Saved');
  await page.screenshot({path:output+'/models.png'});
  await f.locator('#closeModal').click();await f.locator('[data-page=review]').first().click();await f.locator('[data-ai=request]').click();await f.locator('[data-ai=send-text]').click();
  await f.waitForFunction(()=>document.querySelector('#aiDiagnostics').textContent.includes('Receiving provider output'));
  await f.locator('[data-diagnostic-detail=root] summary').first().click();await f.locator('[data-diagnostic-detail=reasoning] summary').click();
  await f.waitForFunction(()=>document.querySelector('[data-diagnostic-detail=reasoning] pre').textContent.includes('Synthetic provider reasoning'));
  assert.equal(await f.locator('.ai-report').count(),0);finishStream();finishStream=undefined;
  await f.waitForFunction(()=>document.querySelector('#aiDiagnostics').textContent.includes('not valid JSON'));
  await f.locator('[data-diagnostic-detail=output] summary').click();assert.match(await f.locator('[data-diagnostic-detail=output] pre').innerText(),/INVALID JSON.*\[REDACTED\]/s);
  assert.equal(await f.locator('.ai-report').count(),0);assert.equal(await f.evaluate(()=>window.executed),undefined);assert.doesNotMatch(await f.locator('#aiDiagnostics').innerText(),/dummy-diagnostic-key/);
  recoverable=true;
  await f.locator('[data-ai=request]').click();await f.locator('[data-ai=send-text]').click();
  await f.waitForFunction(()=>document.querySelector('#aiDiagnostics').textContent.includes('Receiving provider output'));
  finishStream();finishStream=undefined;await f.locator('.ai-report').waitFor();
  await f.locator('[data-diagnostic-detail=root]').evaluate(e=>e.open=true);
  assert.match(await f.locator('[data-format-recovery]').innerText(),/JSON formatting recovered.*closing brace.*assessments/s);
  assert.match(await f.locator('[data-evidence-notice]').innerText(),/no-photo disclaimer/);
  assert.match(await f.locator('.ai-report').innerText(),/No visual findings from patient photos were recorded/);
  assert.doesNotMatch(await f.locator('.ai-report').innerText(),/only schematic body-map annotations/);
  await f.locator('[data-diagnostic-detail=output]').evaluate(e=>e.open=true);
  assert.equal(await f.locator('[data-diagnostic-detail=output] pre').innerText(),missingBrace,'Original provider output remains inspectable');
  assert.equal(inferenceCalls,2,'Recovery does not issue an extra provider request');
  assert.match(await f.locator('.ai-report').innerText(),/Synthetic fixture/);
  for(const theme of ['light','dark']){
    await iframe.evaluate(e=>e.style.cssText='');await page.setViewportSize({width:1600,height:1000});const appearance=page.getByRole('button',{name:/Appearance:/});
    for(let n=0;n<4;n++){if(((await appearance.getAttribute('aria-label'))||await appearance.innerText()).toLowerCase().includes(theme))break;await appearance.click();}
    for(const[w,h]of[[1600,1000],[900,600],[320,560],[200,160]]){
      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;min-width:0;min-height:0;z-index:9999;border:0`,[w,h]);
      if(w===200){assert.ok(await f.locator('.minimum-notice').isVisible());continue;}
      await f.locator('#aiDiagnostics').scrollIntoViewIfNeeded();assert.ok(await f.locator('.ai-diagnostics').evaluate(e=>{const r=e.getBoundingClientRect();return r.left>=0&&r.right<=innerWidth;}));
      await page.screenshot({path:`${output}/${theme}-${w}.png`});
    }
  }
  assert.equal(await f.evaluate(async()=>{const saved=await window.napplet.storage.getItem('body-journal-case-v1');return !/INVALID JSON|Synthetic provider reasoning|diagnostics/.test(saved||'');}),true,'Raw diagnostics are not autosaved');
  await page.setViewportSize({width:900,height:600});await iframe.evaluate(e=>e.style.cssText='position:fixed;inset:0;width:900px;height:600px;z-index:9999;border:0');
  await f.locator('[data-ai=clear-diagnostics]').click();assert.equal(await f.locator('.ai-diagnostics').count(),0);
  const touch=await browser.newContext({hasTouch:true,isMobile:true,viewport:{width:390,height:844}});const tp=await touch.newPage();tp.on('pageerror',e=>errors.push(e.message));await tp.goto(process.argv[2]);const ti=tp.locator('iframe');await ti.waitFor();const tf=await(await ti.elementHandle()).contentFrame();await tf.locator('#app[data-ready=true]').waitFor();
  for(const [w,h] of [[390,844],[844,390]]){
    await tp.setViewportSize({width:w,height:h});await ti.evaluate((e,[w,h])=>e.style.cssText=`position:fixed;inset:0;width:${w}px;height:${h}px;min-width:0;min-height:0;z-index:9999;border:0`,[w,h]);
    await tf.locator('#connectionsButton').tap();await tf.locator('#connectionModelSelect').selectOption('gpt-5.4-mini');assert.equal(await tf.locator('#connectionModel').inputValue(),'gpt-5.4-mini');
    await tf.locator('#connectionModelSelect').scrollIntoViewIfNeeded();assert.ok(await tf.locator('#connectionModelSelect').evaluate(e=>{const r=e.getBoundingClientRect();return r.left>=0&&r.right<=innerWidth;}));await tp.screenshot({path:`${output}/touch-${w}.png`});await tf.locator('#closeModal').tap();
  }await touch.close();
  assert.deepEqual(errors,[]);console.log(JSON.stringify({passed:['Real bridge model discovery, manual IDs, failed discovery fallback, stale list rejection','Live reasoning before result, failed JSON raw response, redaction, no report acceptance','Missing-brace response accepted, visible recovery notice, original output retained, no extra inference','No-photo disclaimer omitted from findings, visible evidence notice, photo-free schema','Required frame sizes, host light/dark, touch portrait/landscape, escaped output, no persisted diagnostics, clear diagnostics'],modelReads,inferenceCalls,realVendorCalls:0,errors},null,2));
}finally{releaseModels?.();finishStream?.();bridge.abort();await client.close();await bridge.server.close();await browser.close();}