import { WebSocket } from 'ws';
const list = await (await fetch('http://127.0.0.1:9222/json/list')).json();
const page = list.find(t => t.type === 'page');
const ws = new WebSocket(page.webSocketDebuggerUrl);
let id=0; const pend=new Map();
const send=(m,p={})=>new Promise(r=>{const i=++id;pend.set(i,r);ws.send(JSON.stringify({id:i,method:m,params:p}));});
await new Promise(r=>ws.on('open',r));
ws.on('message',d=>{const m=JSON.parse(d);if(m.id&&pend.has(m.id)){pend.get(m.id)(m.result);pend.delete(m.id);}});
await send('Emulation.setDeviceMetricsOverride',{width:1400,height:900,deviceScaleFactor:1,mobile:false});
await send('Page.navigate',{url:'http://127.0.0.1:5173/'});
await new Promise(r=>setTimeout(r,4500));
const {result} = await send('Runtime.evaluate',{expression:`(()=>{
  const t=document.querySelector('[role="tablist"]');
  if(!t) return 'no tablist';
  const b=t.getBoundingClientRect(); const cs=getComputedStyle(t);
  return JSON.stringify({rect:{x:Math.round(b.x),y:Math.round(b.y),w:Math.round(b.width),h:Math.round(b.height)},
    radius:cs.borderRadius, borderBottom:cs.borderBottomWidth+' '+cs.borderBottomColor,
    bg:cs.backgroundColor, blur:cs.backdropFilter, margin:cs.margin, padding:cs.padding}, null, 1);
})()`,returnByValue:true});
console.log(result?.value);
const {data}=await send('Page.captureScreenshot',{format:'png'});
(await import('node:fs')).writeFileSync('/tmp/webui-wide.png',Buffer.from(data,'base64'));
ws.close();