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:2,mobile:false});
await send('Page.navigate',{url:'http://127.0.0.1:5173/'});
await new Promise(r=>setTimeout(r,5000));
const {result}=await send('Runtime.evaluate',{expression:`(()=>{
  const out={};
  const pick=(sel,label)=>{const e=document.querySelector(sel); if(!e){out[label]='(none)';return;}
    const b=e.getBoundingClientRect(), cs=getComputedStyle(e);
    out[label]={x:Math.round(b.x),y:Math.round(b.y),w:Math.round(b.width),h:Math.round(b.height),
      radius:cs.borderRadius, bg:cs.backgroundColor, blur:cs.backdropFilter, shadow:cs.boxShadow.slice(0,40), border:cs.borderWidth+' '+cs.borderColor};};
  pick('.app-shell > *','pane');
  pick('[data-testid="comm-tabs"]','tabstrip');
  pick('.glass-card','firstCard');
  return JSON.stringify(out,null,1);
})()`,returnByValue:true});
console.log(result?.value);
const {data}=await send('Page.captureScreenshot',{format:'png',clip:{x:60,y:0,width:420,height:260,scale:2}});
(await import('node:fs')).writeFileSync('/tmp/web-pane-tl.png',Buffer.from(data,'base64'));
ws.close();