playwright-logbook 0.2.0

package/dist/template/js/project.js

@@ -0,0 +1,40 @@
+export const PROJECT_JS = `
+function renderProject(){
+  const panel=document.getElementById('tab-project');clear(panel);const info=model.run.project;
+  panel.appendChild(h('h2',{text:'Project'}));
+  panel.appendChild(h('p',{class:'muted',text:(info.name||'(unnamed)')+' · '+(info.configFile||'No config file')}));
+  panel.appendChild(h('h3',{text:'Playwright projects'}));
+  const cards=h('div',{class:'grid-cards'});
+  for(const item of model.projects||[]){
+    const rate=item.total?Math.round(item.passed/item.total*100):0;
+    cards.appendChild(h('div',{class:'section-card'},h('strong',{text:item.name||'(default)'}),
+      h('p',{text:item.total+' tests · '+rate+'% passed'}),h('small',{text:formatDuration(item.durationMs)})));
+  }
+  panel.appendChild(cards);
+  panel.appendChild(h('h3',{text:'Files'}));
+  const sort=h('select',{'aria-label':'Sort files'});
+  for(const [value,label] of [['file','File'],['failed','Most failed'],['flaky','Most flaky'],['durationMs','Slowest']])sort.appendChild(h('option',{value,text:label}));
+  panel.appendChild(sort);const files=h('div',{});panel.appendChild(files);
+  function drawFiles(){
+    clear(files);const key=sort.value;
+    const ordered=[...model.files].sort((a,b)=>key==='file'?(a.file<b.file?-1:a.file>b.file?1:0):b[key]-a[key]||(a.file<b.file?-1:1));
+    const rows=ordered.map(item=>{
+      const failed=h('span',{},String(item.failed),h('span',{class:'heat hot'},h('span',{style:'width:'+(item.total?Math.round(item.failed/item.total*100):0)+'%'})));
+      const flaky=h('span',{},String(item.flaky),h('span',{class:'heat'},h('span',{style:'width:'+(item.total?Math.round(item.flaky/item.total*100):0)+'%'})));
+      return [item.file,item.total,failed,flaky,item.skipped,formatDuration(item.durationMs)];
+    });
+    files.appendChild(table(['File','Total','Failed','Flaky','Skipped','Duration'],rows));
+  }
+  sort.addEventListener('change',drawFiles);drawFiles();
+  panel.appendChild(h('h3',{text:'Tags'}));const tags=h('div',{class:'toolbar'});
+  for(const item of model.tags){const button=h('button',{class:'chip-button',type:'button',text:item.tag+' · '+item.count});
+    button.addEventListener('click',()=>setState({tab:'tests',tag:item.tag}));tags.appendChild(button)}
+  panel.appendChild(tags);panel.appendChild(h('h3',{text:'Slowest tests'}));
+  panel.appendChild(table(['Test','File','Project','Duration'],model.slowest.map(item=>{
+    const button=h('button',{class:'button',type:'button',text:item.title});
+    button.addEventListener('click',()=>openTest(item.testId,button));
+    return [button,item.file,item.project,formatDuration(item.durationMs)];
+  })));
+}
+`;
+//# sourceMappingURL=project.js.map

package/dist/template/js/project.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project.js","sourceRoot":"","sources":["../../../src/template/js/project.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCzB,CAAC"}

package/dist/template/js/run.d.ts

@@ -0,0 +1 @@
+export declare const RUN_JS = "\nfunction renderRun(){\n  const panel=document.getElementById('tab-run');clear(panel);panel.appendChild(h('h2',{text:'Run details'}));\n  const run=model.run,env=run.env,cards=h('div',{class:'grid-cards'});\n  const sections=[\n    ['CI',[['Provider',env.ci?.provider],['Build ID',env.ci?.buildId]]],\n    ['Git',[['Branch',env.git.branch],['Commit',env.git.commit],['PR',env.git.prNumber]]],\n    ['Machine',[['OS',env.machine.os],['Architecture',env.machine.arch],['Node',env.machine.node],['CPUs',env.machine.cpus]]],\n    ['Playwright',[['Version',env.playwrightVersion],['Workers',env.workers]]],\n    ['Shards',[['Expected',run.expectedShards],['Received',run.receivedShards.join(', ')]]]\n  ];\n  for(const [name,values] of sections)cards.appendChild(h('div',{class:'section-card'},h('h3',{text:name}),...values.map(([label,value])=>h('p',{},label+': '+(value??'\u2014')))));\n  panel.appendChild(cards);\n  if(env.ci?.buildUrl)panel.appendChild(link('Open CI build',env.ci.buildUrl));\n  panel.appendChild(h('h3',{text:'Timeline \u00B7 approximate'}));\n  if(run.expectedShards!==1){panel.appendChild(h('p',{class:'muted',text:'Timeline is available for unsharded runs.'}));return}\n  const tests=run.tests.filter(test=>test.timing).sort((a,b)=>b.durationMs-a.durationMs).slice(0,1500);\n  if(run.tests.length>1500)panel.appendChild(h('p',{class:'muted',text:'Showing the 1500 longest tests.'}));\n  if(!tests.length){panel.appendChild(h('p',{class:'muted',text:'No timing data available.'}));return}\n  const starts=tests.map(test=>Date.parse(test.timing.startedAt));\n  const min=Math.min(...starts),max=Math.max(...tests.map((test,index)=>starts[index]+test.durationMs));\n  const workers=[...new Set(tests.map(test=>test.timing.workerIndex))].sort((a,b)=>a-b);\n  const chart=s('svg',{class:'chart timeline',viewBox:'0 0 800 '+Math.max(160,workers.length*34+30),role:'img','aria-label':'Test timeline'});\n  tests.forEach((test,index)=>{\n    const x=70+700*(starts[index]-min)/Math.max(1,max-min);\n    const width=Math.max(2,700*test.durationMs/Math.max(1,max-min));\n    const y=15+workers.indexOf(test.timing.workerIndex)*34;\n    const rect=s('rect',{x,y,width,height:20,class:statusKind(test),tabindex:'0'});\n    rect.appendChild(s('title',{},test.title+' \u00B7 '+formatDuration(test.durationMs)));\n    rect.addEventListener('click',()=>openTest(test.testId));\n    rect.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();openTest(test.testId)}});\n    chart.appendChild(rect);\n  });\n  workers.forEach((worker,index)=>chart.appendChild(s('text',{x:4,y:30+index*34},'W'+worker)));\n  panel.appendChild(h('div',{class:'table-wrap'},chart));\n}\n";

package/dist/template/js/run.js

@@ -0,0 +1,38 @@
+export const RUN_JS = `
+function renderRun(){
+  const panel=document.getElementById('tab-run');clear(panel);panel.appendChild(h('h2',{text:'Run details'}));
+  const run=model.run,env=run.env,cards=h('div',{class:'grid-cards'});
+  const sections=[
+    ['CI',[['Provider',env.ci?.provider],['Build ID',env.ci?.buildId]]],
+    ['Git',[['Branch',env.git.branch],['Commit',env.git.commit],['PR',env.git.prNumber]]],
+    ['Machine',[['OS',env.machine.os],['Architecture',env.machine.arch],['Node',env.machine.node],['CPUs',env.machine.cpus]]],
+    ['Playwright',[['Version',env.playwrightVersion],['Workers',env.workers]]],
+    ['Shards',[['Expected',run.expectedShards],['Received',run.receivedShards.join(', ')]]]
+  ];
+  for(const [name,values] of sections)cards.appendChild(h('div',{class:'section-card'},h('h3',{text:name}),...values.map(([label,value])=>h('p',{},label+': '+(value??'—')))));
+  panel.appendChild(cards);
+  if(env.ci?.buildUrl)panel.appendChild(link('Open CI build',env.ci.buildUrl));
+  panel.appendChild(h('h3',{text:'Timeline · approximate'}));
+  if(run.expectedShards!==1){panel.appendChild(h('p',{class:'muted',text:'Timeline is available for unsharded runs.'}));return}
+  const tests=run.tests.filter(test=>test.timing).sort((a,b)=>b.durationMs-a.durationMs).slice(0,1500);
+  if(run.tests.length>1500)panel.appendChild(h('p',{class:'muted',text:'Showing the 1500 longest tests.'}));
+  if(!tests.length){panel.appendChild(h('p',{class:'muted',text:'No timing data available.'}));return}
+  const starts=tests.map(test=>Date.parse(test.timing.startedAt));
+  const min=Math.min(...starts),max=Math.max(...tests.map((test,index)=>starts[index]+test.durationMs));
+  const workers=[...new Set(tests.map(test=>test.timing.workerIndex))].sort((a,b)=>a-b);
+  const chart=s('svg',{class:'chart timeline',viewBox:'0 0 800 '+Math.max(160,workers.length*34+30),role:'img','aria-label':'Test timeline'});
+  tests.forEach((test,index)=>{
+    const x=70+700*(starts[index]-min)/Math.max(1,max-min);
+    const width=Math.max(2,700*test.durationMs/Math.max(1,max-min));
+    const y=15+workers.indexOf(test.timing.workerIndex)*34;
+    const rect=s('rect',{x,y,width,height:20,class:statusKind(test),tabindex:'0'});
+    rect.appendChild(s('title',{},test.title+' · '+formatDuration(test.durationMs)));
+    rect.addEventListener('click',()=>openTest(test.testId));
+    rect.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();openTest(test.testId)}});
+    chart.appendChild(rect);
+  });
+  workers.forEach((worker,index)=>chart.appendChild(s('text',{x:4,y:30+index*34},'W'+worker)));
+  panel.appendChild(h('div',{class:'table-wrap'},chart));
+}
+`;
+//# sourceMappingURL=run.js.map

package/dist/template/js/run.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"run.js","sourceRoot":"","sources":["../../../src/template/js/run.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrB,CAAC"}

package/dist/template/js/tests.d.ts

@@ -0,0 +1 @@
+export declare const TESTS_JS = "\nlet testsReady=false,showCount=200,searchTimer=0;\nfunction renderTests(){const panel=document.getElementById('tab-tests');if(!testsReady){testsReady=true;const toolbar=h('div',{class:'toolbar'});const search=h('input',{id:'lb-search',type:'search','aria-label':'Search tests',placeholder:'Search tests'});search.value=state.q;search.addEventListener('input',()=>{clearTimeout(searchTimer);searchTimer=setTimeout(()=>setState({q:search.value}),120)});toolbar.appendChild(search);const counts={passed:0,failed:0,flaky:0,skipped:0};for(const test of allTests){const kind=statusKind(test);counts[kind==='timedout'?'failed':kind]++}for(const kind of ['passed','failed','flaky','skipped']){const button=h('button',{class:'chip-button','data-status':kind,type:'button'},kind+' '+counts[kind]);button.addEventListener('click',()=>setState({status:state.status.includes(kind)?state.status.filter(item=>item!==kind):[...state.status,kind]}));toolbar.appendChild(button)}const project=h('select',{id:'lb-project','aria-label':'Filter project'},h('option',{value:'',text:'All projects'}));for(const name of [...new Set(allTests.map(test=>test.project))].sort())project.appendChild(h('option',{value:name,text:name||'(default)'}));project.addEventListener('change',()=>setState({project:project.value}));toolbar.appendChild(project);const tag=h('select',{id:'lb-tag','aria-label':'Filter tag'},h('option',{value:'',text:'All tags'}));for(const name of [...new Set(allTests.flatMap(test=>test.tags))].sort())tag.appendChild(h('option',{value:name,text:name}));tag.addEventListener('change',()=>setState({tag:tag.value}));toolbar.appendChild(tag);const sort=h('select',{id:'lb-sort','aria-label':'Sort tests'});for(const [value,label] of [['default','Default'],['slowest','Slowest'],['fastest','Fastest'],['title','Title'],['attempts','Most attempts'],['severity','Severity']])sort.appendChild(h('option',{value,text:label}));sort.addEventListener('change',()=>setState({sort:sort.value}));toolbar.appendChild(sort);const group=h('button',{id:'lb-group',class:'chip-button',type:'button',text:'Group by file'});group.addEventListener('click',()=>setState({group:state.group==='file'?'none':'file'}));toolbar.appendChild(group);if(model.comparison){const changed=h('button',{id:'lb-changed',class:'chip-button',type:'button',text:'Changed'});changed.addEventListener('click',()=>setState({changed:!state.changed}));toolbar.appendChild(changed)}panel.appendChild(toolbar);panel.appendChild(h('p',{id:'lb-result-count',class:'muted'}));panel.appendChild(h('div',{class:'table-wrap'},h('table',{},h('thead',{},h('tr',{},['Status','Test','Project','Tags / case IDs','Duration','Attempts','Last 10'].map(item=>h('th',{text:item})))),h('tbody',{id:'lb-tests-body'}))));panel.appendChild(h('button',{id:'lb-more',class:'button',type:'button',text:'Show 200 more'}));document.getElementById('lb-more').addEventListener('click',()=>{showCount+=200;renderTests()})}const search=document.getElementById('lb-search');if(document.activeElement!==search)search.value=state.q;document.getElementById('lb-project').value=state.project;document.getElementById('lb-tag').value=state.tag;document.getElementById('lb-sort').value=state.sort;document.getElementById('lb-group').setAttribute('aria-pressed',String(state.group==='file'));document.getElementById('lb-changed')?.setAttribute('aria-pressed',String(state.changed));for(const button of panel.querySelectorAll('[data-status]'))button.setAttribute('aria-pressed',String(state.status.includes(button.dataset.status)));const changedIds=model.comparison?[...model.comparison.newFailures,...model.comparison.fixed,...model.comparison.newTests].map(item=>item.testId):[];visibleRows=sortTests(filterTests(allTests,state,{changedIds}),state.sort);document.getElementById('lb-result-count').textContent=visibleRows.length+' of '+allTests.length+' tests';const body=document.getElementById('lb-tests-body');clear(body);const max=Math.max(1,...allTests.map(test=>test.durationMs));const durations=allTests.map(test=>test.durationMs).sort((a,b)=>a-b);const p90=durations[Math.floor(durations.length*.9)]||0;const shown=visibleRows.slice(0,showCount);if(!shown.length)body.appendChild(h('tr',{},h('td',{colspan:'7',class:'empty',text:'No tests match these filters.'})));let lastFile='';for(const test of shown){if(state.group==='file'&&test.file!==lastFile){lastFile=test.file;body.appendChild(h('tr',{class:'group-header'},h('td',{colspan:'7',text:test.file+' \u00B7 '+visibleRows.filter(item=>item.file===test.file).length+' tests'})))}const kind=statusKind(test);const name=h('td',{},h('strong',{text:test.title,title:test.title}),h('small',{text:test.file+':'+test.line}),test.firstError?h('small',{text:test.firstError.message.split('\\n')[0]}):null);const tags=h('td',{},test.tags.slice(0,3).join(' '),test.tags.length>3?' +'+(test.tags.length-3):'',h('small',{text:test.caseIds.join(' ')}));const heat=heatLevel(test.durationMs,max,p90);const duration=h('td',{},formatDuration(test.durationMs),h('span',{class:'heat'+(heat.hot?' hot':'')},h('span',{style:'width:'+heat.percent+'%'})));const row=h('tr',{'data-test-id':test.testId,tabindex:'0'},h('td',{},chip(kind)),name,h('td',{text:test.project||'(default)'}),tags,duration,h('td',{text:test.attemptCount}),h('td',{},recentStrip(model.recent?.[test.testId])));row.addEventListener('click',()=>openTest(test.testId,row));body.appendChild(row)}const more=document.getElementById('lb-more');more.hidden=visibleRows.length<=showCount;more.textContent='Show 200 more ('+(visibleRows.length-showCount)+' left)'}\nfunction renderPagination(){\n  const panel=document.getElementById('tab-tests'),more=document.getElementById('lb-more');\n  let footer=document.getElementById('lb-pagination');\n  if(!footer){\n    footer=h('div',{id:'lb-pagination',class:'pagination'});\n    footer.appendChild(h('p',{id:'lb-pagination-note','aria-live':'polite'}));\n    footer.appendChild(more);\n    panel.appendChild(footer);\n    more.addEventListener('click',renderPagination);\n  }\n  const shown=Math.min(showCount,visibleRows.length),remaining=visibleRows.length-shown;\n  footer.hidden=remaining<=0;\n  more.hidden=remaining<=0;\n  if(remaining>0){\n    document.getElementById('lb-pagination-note').textContent='Showing '+shown+' of '+visibleRows.length+' matching tests. Rows load in batches to keep this report responsive.';\n    more.textContent='Show next '+Math.min(200,remaining)+' tests';\n  }\n}\n";

package/dist/template/js/tests.js

@@ -0,0 +1,23 @@
+export const TESTS_JS = `
+let testsReady=false,showCount=200,searchTimer=0;
+function renderTests(){const panel=document.getElementById('tab-tests');if(!testsReady){testsReady=true;const toolbar=h('div',{class:'toolbar'});const search=h('input',{id:'lb-search',type:'search','aria-label':'Search tests',placeholder:'Search tests'});search.value=state.q;search.addEventListener('input',()=>{clearTimeout(searchTimer);searchTimer=setTimeout(()=>setState({q:search.value}),120)});toolbar.appendChild(search);const counts={passed:0,failed:0,flaky:0,skipped:0};for(const test of allTests){const kind=statusKind(test);counts[kind==='timedout'?'failed':kind]++}for(const kind of ['passed','failed','flaky','skipped']){const button=h('button',{class:'chip-button','data-status':kind,type:'button'},kind+' '+counts[kind]);button.addEventListener('click',()=>setState({status:state.status.includes(kind)?state.status.filter(item=>item!==kind):[...state.status,kind]}));toolbar.appendChild(button)}const project=h('select',{id:'lb-project','aria-label':'Filter project'},h('option',{value:'',text:'All projects'}));for(const name of [...new Set(allTests.map(test=>test.project))].sort())project.appendChild(h('option',{value:name,text:name||'(default)'}));project.addEventListener('change',()=>setState({project:project.value}));toolbar.appendChild(project);const tag=h('select',{id:'lb-tag','aria-label':'Filter tag'},h('option',{value:'',text:'All tags'}));for(const name of [...new Set(allTests.flatMap(test=>test.tags))].sort())tag.appendChild(h('option',{value:name,text:name}));tag.addEventListener('change',()=>setState({tag:tag.value}));toolbar.appendChild(tag);const sort=h('select',{id:'lb-sort','aria-label':'Sort tests'});for(const [value,label] of [['default','Default'],['slowest','Slowest'],['fastest','Fastest'],['title','Title'],['attempts','Most attempts'],['severity','Severity']])sort.appendChild(h('option',{value,text:label}));sort.addEventListener('change',()=>setState({sort:sort.value}));toolbar.appendChild(sort);const group=h('button',{id:'lb-group',class:'chip-button',type:'button',text:'Group by file'});group.addEventListener('click',()=>setState({group:state.group==='file'?'none':'file'}));toolbar.appendChild(group);if(model.comparison){const changed=h('button',{id:'lb-changed',class:'chip-button',type:'button',text:'Changed'});changed.addEventListener('click',()=>setState({changed:!state.changed}));toolbar.appendChild(changed)}panel.appendChild(toolbar);panel.appendChild(h('p',{id:'lb-result-count',class:'muted'}));panel.appendChild(h('div',{class:'table-wrap'},h('table',{},h('thead',{},h('tr',{},['Status','Test','Project','Tags / case IDs','Duration','Attempts','Last 10'].map(item=>h('th',{text:item})))),h('tbody',{id:'lb-tests-body'}))));panel.appendChild(h('button',{id:'lb-more',class:'button',type:'button',text:'Show 200 more'}));document.getElementById('lb-more').addEventListener('click',()=>{showCount+=200;renderTests()})}const search=document.getElementById('lb-search');if(document.activeElement!==search)search.value=state.q;document.getElementById('lb-project').value=state.project;document.getElementById('lb-tag').value=state.tag;document.getElementById('lb-sort').value=state.sort;document.getElementById('lb-group').setAttribute('aria-pressed',String(state.group==='file'));document.getElementById('lb-changed')?.setAttribute('aria-pressed',String(state.changed));for(const button of panel.querySelectorAll('[data-status]'))button.setAttribute('aria-pressed',String(state.status.includes(button.dataset.status)));const changedIds=model.comparison?[...model.comparison.newFailures,...model.comparison.fixed,...model.comparison.newTests].map(item=>item.testId):[];visibleRows=sortTests(filterTests(allTests,state,{changedIds}),state.sort);document.getElementById('lb-result-count').textContent=visibleRows.length+' of '+allTests.length+' tests';const body=document.getElementById('lb-tests-body');clear(body);const max=Math.max(1,...allTests.map(test=>test.durationMs));const durations=allTests.map(test=>test.durationMs).sort((a,b)=>a-b);const p90=durations[Math.floor(durations.length*.9)]||0;const shown=visibleRows.slice(0,showCount);if(!shown.length)body.appendChild(h('tr',{},h('td',{colspan:'7',class:'empty',text:'No tests match these filters.'})));let lastFile='';for(const test of shown){if(state.group==='file'&&test.file!==lastFile){lastFile=test.file;body.appendChild(h('tr',{class:'group-header'},h('td',{colspan:'7',text:test.file+' · '+visibleRows.filter(item=>item.file===test.file).length+' tests'})))}const kind=statusKind(test);const name=h('td',{},h('strong',{text:test.title,title:test.title}),h('small',{text:test.file+':'+test.line}),test.firstError?h('small',{text:test.firstError.message.split('\\n')[0]}):null);const tags=h('td',{},test.tags.slice(0,3).join(' '),test.tags.length>3?' +'+(test.tags.length-3):'',h('small',{text:test.caseIds.join(' ')}));const heat=heatLevel(test.durationMs,max,p90);const duration=h('td',{},formatDuration(test.durationMs),h('span',{class:'heat'+(heat.hot?' hot':'')},h('span',{style:'width:'+heat.percent+'%'})));const row=h('tr',{'data-test-id':test.testId,tabindex:'0'},h('td',{},chip(kind)),name,h('td',{text:test.project||'(default)'}),tags,duration,h('td',{text:test.attemptCount}),h('td',{},recentStrip(model.recent?.[test.testId])));row.addEventListener('click',()=>openTest(test.testId,row));body.appendChild(row)}const more=document.getElementById('lb-more');more.hidden=visibleRows.length<=showCount;more.textContent='Show 200 more ('+(visibleRows.length-showCount)+' left)'}
+function renderPagination(){
+  const panel=document.getElementById('tab-tests'),more=document.getElementById('lb-more');
+  let footer=document.getElementById('lb-pagination');
+  if(!footer){
+    footer=h('div',{id:'lb-pagination',class:'pagination'});
+    footer.appendChild(h('p',{id:'lb-pagination-note','aria-live':'polite'}));
+    footer.appendChild(more);
+    panel.appendChild(footer);
+    more.addEventListener('click',renderPagination);
+  }
+  const shown=Math.min(showCount,visibleRows.length),remaining=visibleRows.length-shown;
+  footer.hidden=remaining<=0;
+  more.hidden=remaining<=0;
+  if(remaining>0){
+    document.getElementById('lb-pagination-note').textContent='Showing '+shown+' of '+visibleRows.length+' matching tests. Rows load in batches to keep this report responsive.';
+    more.textContent='Show next '+Math.min(200,remaining)+' tests';
+  }
+}
+`;
+//# sourceMappingURL=tests.js.map

package/dist/template/js/tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tests.js","sourceRoot":"","sources":["../../../src/template/js/tests.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBvB,CAAC"}

package/dist/template/js/trends.d.ts

@@ -0,0 +1 @@
+export declare const TRENDS_JS = "\nfunction renderTrends(){\n  const panel=document.getElementById('tab-trends');clear(panel);panel.appendChild(h('h2',{text:'Trends'}));\n  const history=model.history||[];\n  if(history.length<2){panel.appendChild(h('p',{class:'empty',text:'Run the suite more times to see trends.'}));return}\n  const branches=[...new Set(history.map(item=>item.branch).filter(Boolean))].sort();\n  const select=h('select',{'aria-label':'Filter branch'},h('option',{value:'',text:'All branches'}));\n  for(const branch of branches)select.appendChild(h('option',{value:branch,text:branch}));\n  panel.appendChild(select);const content=h('div',{});panel.appendChild(content);\n  select.addEventListener('change',draw);\n  function draw(){\n    clear(content);const values=history.filter(item=>!select.value||item.branch===select.value);\n    const maxDuration=Math.max(1,...values.map(item=>item.durationMs));\n    const chart=s('svg',{class:'chart',viewBox:'0 0 800 190',role:'img','aria-label':'Pass rate and duration over runs'});\n    const coordinates=[];\n    values.forEach((item,index)=>{\n      const x=25+(values.length===1?375:index*750/(values.length-1));\n      const rate=item.summary.total?item.summary.passed/item.summary.total:0;\n      const y=150-120*rate;\n      coordinates.push([x,y]);\n      const barHeight=70*item.durationMs/maxDuration;\n      const bar=s('rect',{x:x-7,y:165-barHeight,width:14,height:barHeight});\n      bar.appendChild(s('title',{},item.runId+' \u00B7 '+formatDuration(item.durationMs)));\n      chart.appendChild(bar);\n    });\n    const points=coordinates.map(([x,y])=>x+','+y).join(' ');\n    const area=s('polygon',{points:'25,165 '+points+' 775,165',class:'trend-area'});\n    chart.appendChild(area);chart.appendChild(s('polyline',{points,class:'trend-line'}));\n    values.forEach((item,index)=>{\n      const [x,y]=coordinates[index];const dot=s('circle',{cx:x,cy:y,r:4,class:'trend-dot'});\n      dot.appendChild(s('title',{},item.runId+' \u00B7 '+item.status));\n      chart.appendChild(dot);\n    });\n    content.appendChild(chart);\n    const strip=h('div',{class:'run-strip','aria-label':'Run status history'});\n    for(const item of values)strip.appendChild(h('span',{class:item.status==='passed'?'passed':'failed',title:item.runId+' \u00B7 '+item.status,'aria-label':item.runId+' '+item.status}));\n    content.appendChild(strip);\n    content.appendChild(table(['Run','Date','Branch','Status','Pass rate','Duration'],values.map(item=>[\n      item.runId+(item.runId===model.run.runId?' \u00B7 current':''),item.startedAt,item.branch||'',item.status,\n      (item.summary.total?Math.round(100*item.summary.passed/item.summary.total):0)+'%',formatDuration(item.durationMs)\n    ])));\n  }\n  draw();\n}\nfunction renderFlaky(){\n  const panel=document.getElementById('tab-flaky');clear(panel);panel.appendChild(h('h2',{text:'Flaky tests'}));\n  if(!model.flaky?.length){panel.appendChild(h('p',{class:'empty',text:'No flaky tests detected in the available runs.'}));return}\n  const rows=model.flaky.map(item=>{\n    const button=h('button',{class:'button',type:'button',text:item.title});\n    button.addEventListener('click',()=>byId.has(item.testId)&&openTest(item.testId,button));\n    const score=h('span',{},(item.score*100).toFixed(0)+'%',h('span',{class:'heat'},h('span',{style:'width:'+Math.round(item.score*100)+'%'})));\n    return [button,item.file,item.project,score,item.runs,item.flakyRuns,item.fails,recentStrip(model.recent?.[item.testId])];\n  });\n  panel.appendChild(table(['Test','File','Project','Score','Runs','Flaky runs','Fails','Last 10'],rows));\n}\n";

package/dist/template/js/trends.js

@@ -0,0 +1,57 @@
+export const TRENDS_JS = `
+function renderTrends(){
+  const panel=document.getElementById('tab-trends');clear(panel);panel.appendChild(h('h2',{text:'Trends'}));
+  const history=model.history||[];
+  if(history.length<2){panel.appendChild(h('p',{class:'empty',text:'Run the suite more times to see trends.'}));return}
+  const branches=[...new Set(history.map(item=>item.branch).filter(Boolean))].sort();
+  const select=h('select',{'aria-label':'Filter branch'},h('option',{value:'',text:'All branches'}));
+  for(const branch of branches)select.appendChild(h('option',{value:branch,text:branch}));
+  panel.appendChild(select);const content=h('div',{});panel.appendChild(content);
+  select.addEventListener('change',draw);
+  function draw(){
+    clear(content);const values=history.filter(item=>!select.value||item.branch===select.value);
+    const maxDuration=Math.max(1,...values.map(item=>item.durationMs));
+    const chart=s('svg',{class:'chart',viewBox:'0 0 800 190',role:'img','aria-label':'Pass rate and duration over runs'});
+    const coordinates=[];
+    values.forEach((item,index)=>{
+      const x=25+(values.length===1?375:index*750/(values.length-1));
+      const rate=item.summary.total?item.summary.passed/item.summary.total:0;
+      const y=150-120*rate;
+      coordinates.push([x,y]);
+      const barHeight=70*item.durationMs/maxDuration;
+      const bar=s('rect',{x:x-7,y:165-barHeight,width:14,height:barHeight});
+      bar.appendChild(s('title',{},item.runId+' · '+formatDuration(item.durationMs)));
+      chart.appendChild(bar);
+    });
+    const points=coordinates.map(([x,y])=>x+','+y).join(' ');
+    const area=s('polygon',{points:'25,165 '+points+' 775,165',class:'trend-area'});
+    chart.appendChild(area);chart.appendChild(s('polyline',{points,class:'trend-line'}));
+    values.forEach((item,index)=>{
+      const [x,y]=coordinates[index];const dot=s('circle',{cx:x,cy:y,r:4,class:'trend-dot'});
+      dot.appendChild(s('title',{},item.runId+' · '+item.status));
+      chart.appendChild(dot);
+    });
+    content.appendChild(chart);
+    const strip=h('div',{class:'run-strip','aria-label':'Run status history'});
+    for(const item of values)strip.appendChild(h('span',{class:item.status==='passed'?'passed':'failed',title:item.runId+' · '+item.status,'aria-label':item.runId+' '+item.status}));
+    content.appendChild(strip);
+    content.appendChild(table(['Run','Date','Branch','Status','Pass rate','Duration'],values.map(item=>[
+      item.runId+(item.runId===model.run.runId?' · current':''),item.startedAt,item.branch||'',item.status,
+      (item.summary.total?Math.round(100*item.summary.passed/item.summary.total):0)+'%',formatDuration(item.durationMs)
+    ])));
+  }
+  draw();
+}
+function renderFlaky(){
+  const panel=document.getElementById('tab-flaky');clear(panel);panel.appendChild(h('h2',{text:'Flaky tests'}));
+  if(!model.flaky?.length){panel.appendChild(h('p',{class:'empty',text:'No flaky tests detected in the available runs.'}));return}
+  const rows=model.flaky.map(item=>{
+    const button=h('button',{class:'button',type:'button',text:item.title});
+    button.addEventListener('click',()=>byId.has(item.testId)&&openTest(item.testId,button));
+    const score=h('span',{},(item.score*100).toFixed(0)+'%',h('span',{class:'heat'},h('span',{style:'width:'+Math.round(item.score*100)+'%'})));
+    return [button,item.file,item.project,score,item.runs,item.flakyRuns,item.fails,recentStrip(model.recent?.[item.testId])];
+  });
+  panel.appendChild(table(['Test','File','Project','Score','Runs','Flaky runs','Fails','Last 10'],rows));
+}
+`;
+//# sourceMappingURL=trends.js.map

package/dist/template/js/trends.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trends.js","sourceRoot":"","sources":["../../../src/template/js/trends.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC"}

package/dist/template/tokens.d.ts

@@ -0,0 +1,45 @@
+export declare const TOKENS: {
+    readonly dark: {
+        readonly bg: "#0b1020";
+        readonly surface: "#121a2e";
+        readonly 'surface-2': "#1a2440";
+        readonly border: "#2a3656";
+        readonly text: "#e8edf8";
+        readonly muted: "#aab7d4";
+        readonly accent: "#8ba7ff";
+        readonly 'accent-contrast': "#0b1020";
+        readonly passed: "#3ecf8e";
+        readonly failed: "#ff777e";
+        readonly flaky: "#ffc06e";
+        readonly skipped: "#aab7d4";
+        readonly info: "#6cc4ff";
+        readonly 'passed-bg': "rgba(62,207,142,.14)";
+        readonly 'failed-bg': "rgba(255,107,114,.14)";
+        readonly 'flaky-bg': "rgba(255,180,84,.14)";
+        readonly 'skipped-bg': "rgba(154,167,199,.14)";
+        readonly 'code-bg': "#0a0f1d";
+        readonly shadow: "0 8px 24px rgba(0,0,0,.35)";
+    };
+    readonly light: {
+        readonly bg: "#f4f6fb";
+        readonly surface: "#ffffff";
+        readonly 'surface-2': "#eef2fa";
+        readonly border: "#d8deec";
+        readonly text: "#131a2c";
+        readonly muted: "#56627f";
+        readonly accent: "#3954e6";
+        readonly 'accent-contrast': "#ffffff";
+        readonly passed: "#0b7a4f";
+        readonly failed: "#c62f3a";
+        readonly flaky: "#895000";
+        readonly skipped: "#56627f";
+        readonly info: "#0b6fa8";
+        readonly 'passed-bg': "rgba(11,122,79,.10)";
+        readonly 'failed-bg': "rgba(198,47,58,.10)";
+        readonly 'flaky-bg': "rgba(154,91,0,.10)";
+        readonly 'skipped-bg': "rgba(86,98,127,.10)";
+        readonly 'code-bg': "#f7f9fd";
+        readonly shadow: "0 6px 20px rgba(20,30,60,.10)";
+    };
+};
+export declare function tokensToCss(theme: keyof typeof TOKENS): string;

package/dist/template/tokens.js

@@ -0,0 +1,12 @@
+export const TOKENS = {
+    dark: {
+        bg: '#0b1020', surface: '#121a2e', 'surface-2': '#1a2440', border: '#2a3656', text: '#e8edf8', muted: '#aab7d4', accent: '#8ba7ff', 'accent-contrast': '#0b1020', passed: '#3ecf8e', failed: '#ff777e', flaky: '#ffc06e', skipped: '#aab7d4', info: '#6cc4ff', 'passed-bg': 'rgba(62,207,142,.14)', 'failed-bg': 'rgba(255,107,114,.14)', 'flaky-bg': 'rgba(255,180,84,.14)', 'skipped-bg': 'rgba(154,167,199,.14)', 'code-bg': '#0a0f1d', shadow: '0 8px 24px rgba(0,0,0,.35)',
+    },
+    light: {
+        bg: '#f4f6fb', surface: '#ffffff', 'surface-2': '#eef2fa', border: '#d8deec', text: '#131a2c', muted: '#56627f', accent: '#3954e6', 'accent-contrast': '#ffffff', passed: '#0b7a4f', failed: '#c62f3a', flaky: '#895000', skipped: '#56627f', info: '#0b6fa8', 'passed-bg': 'rgba(11,122,79,.10)', 'failed-bg': 'rgba(198,47,58,.10)', 'flaky-bg': 'rgba(154,91,0,.10)', 'skipped-bg': 'rgba(86,98,127,.10)', 'code-bg': '#f7f9fd', shadow: '0 6px 20px rgba(20,30,60,.10)',
+    },
+};
+export function tokensToCss(theme) {
+    return Object.entries(TOKENS[theme]).map(([name, value]) => `--${name}:${value};`).join('');
+}
+//# sourceMappingURL=tokens.js.map

package/dist/template/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/template/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE;QACJ,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,uBAAuB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,4BAA4B;KAChd;IACD,KAAK,EAAE;QACL,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,qBAAqB,EAAE,WAAW,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,YAAY,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,+BAA+B;KAC5c;CACO,CAAC;AAEX,MAAM,UAAU,WAAW,CAAC,KAA0B;IACpD,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9F,CAAC"}

package/dist/template.d.ts

@@ -0,0 +1,2 @@
+export declare function buildStyles(): string;
+export declare function buildClientScript(): string;

package/dist/template.js

@@ -0,0 +1,19 @@
+import * as clientlib from './clientlib.js';
+import { buildDebugPacket, debugPacketMarkdown } from './debugpacket.js';
+import { detectSignals } from './signals.js';
+import { REPORT_CSS } from './template/css.js';
+import { ICONS } from './template/icons.js';
+import { CORE_JS } from './template/js/core.js';
+import { TESTS_JS } from './template/js/tests.js';
+import { PANEL_JS } from './template/js/panel.js';
+import { FAILURES_JS } from './template/js/failures.js';
+import { TRENDS_JS } from './template/js/trends.js';
+import { RUN_JS } from './template/js/run.js';
+import { PROJECT_JS } from './template/js/project.js';
+import { HELP_JS } from './template/js/help.js';
+export function buildStyles() { return REPORT_CSS; }
+export function buildClientScript() {
+    const pure = Object.entries(clientlib).filter(([, value]) => typeof value === 'function');
+    return `(function(){'use strict';\n${pure.map(([name, fn]) => `const ${name}=(${fn.toString()});`).join('\n')}\nconst detectSignals=(${detectSignals.toString()});\nconst buildDebugPacket=(${buildDebugPacket.toString()});\nconst debugPacketMarkdown=(${debugPacketMarkdown.toString()});\nconst icons=${JSON.stringify(ICONS)};\ntry{${CORE_JS}${TESTS_JS}${PANEL_JS}${FAILURES_JS}${TRENDS_JS}${RUN_JS}${PROJECT_JS}${HELP_JS}\ninit()}catch(error){const banner=document.getElementById('lb-error');banner.hidden=false;banner.textContent='Report could not load: '+String(error)}})();`;
+}
+//# sourceMappingURL=template.js.map

package/dist/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../src/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,MAAM,UAAU,WAAW,KAAa,OAAO,UAAU,CAAC,CAAC,CAAC;AAE5D,MAAM,UAAU,iBAAiB;IAC/B,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC;IAC1F,OAAO,8BAA8B,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,IAAI,KAAK,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,0BAA0B,aAAa,CAAC,QAAQ,EAAE,+BAA+B,gBAAgB,CAAC,QAAQ,EAAE,kCAAkC,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,6JAA6J,CAAC;AAClkB,CAAC"}

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.2.0";

package/dist/version.js

@@ -0,0 +1,2 @@
+export const VERSION = '0.2.0';
+//# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "playwright-logbook",
+  "version": "0.2.0",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "bin": {
+    "playwright-logbook": "dist/cli/bin.js",
+    "logbook": "dist/cli/bin.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "playwright",
+    "reporter",
+    "test-reporting",
+    "flaky-tests",
+    "ci",
+    "sharding"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && esbuild src/index.ts --bundle --platform=node --format=cjs --packages=external --outfile=dist/index.cjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "demo": "npm run build && node scripts/make-demo.mjs",
+    "test:e2e": "npm run demo && playwright test --config=e2e/playwright.config.ts",
+    "shots": "npm run demo && node scripts/make-shots.mjs",
+    "check": "npm run lint && npm run typecheck && npm run build && npm test"
+  },
+  "dependencies": {
+    "commander": "^14.0.0",
+    "zod": "^4.1.0"
+  },
+  "peerDependencies": {
+    "@playwright/test": ">=1.42"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.55.0",
+    "@types/node": "^24.0.0",
+    "esbuild": "^0.28.2",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^3.0.0"
+  }
+}