"use strict";
let SITES=[];let selected=null;
const $=q=>document.querySelector(q);const $$=q=>Array.from(document.querySelectorAll(q));
const LABEL={mean_l0:'MEAN ACTIVE FEATURES (L0)',reconstruction_mse:'RECONSTRUCTION MSE',explained_variance:'EXPLAINED VARIANCE',feature_ablation_logit_delta_l2:'ABLATION LOGIT Δ L2'};
const ARCH={jumprelu:'JumpReLU',topk:'TopK',batchtopk:'BatchTopK',matryoshka_batchtopk:'Matryoshka BatchTopK'};
function family(model){if(model.startsWith('gemma'))return 'Gemma';if(model.startsWith('qwen'))return 'Qwen';if(model.startsWith('llama'))return 'Llama';if(model.startsWith('pythia'))return 'Pythia';if(model.startsWith('mistral'))return 'Mistral';if(model.startsWith('r1_'))return 'R1 Distill';return 'Other';}
function fmt(v){if(v===null||v===undefined)return '—';if(v===0)return '0';let x=Number(v);if(!Number.isFinite(x))return '—';if(Math.abs(x)>=1000)return new Intl.NumberFormat('en',{maximumFractionDigits:1}).format(x);if(Math.abs(x)<.01)return x.toPrecision(3);return Number(x.toPrecision(4)).toLocaleString('en',{maximumFractionDigits:4});}
function go(page){$$('[data-page]').forEach(x=>x.classList.toggle('active',x.dataset.page===page));$$('[data-tab]').forEach(x=>x.classList.toggle('active',x.dataset.tab===page));$('#crumb').textContent=page.toUpperCase();window.scrollTo({top:0,behavior:'smooth'});try{history.replaceState(null,'','#'+page)}catch{}}
$$('[data-tab]').forEach(x=>x.addEventListener('click',()=>go(x.dataset.tab)));
$$('[data-go]').forEach(x=>x.addEventListener('click',()=>go(x.dataset.go)));
if(location.hash&&['overview','explorer','measurements','workflow','tutorial','getstarted'].includes(location.hash.slice(1)))go(location.hash.slice(1));
function populate(){const f=$('#familySelect'),a=$('#archSelect');[...new Set(SITES.map(s=>family(s.model_id)))].sort().forEach(x=>f.add(new Option(x,x)));[...new Set(SITES.map(s=>s.architecture))].sort().forEach(x=>a.add(new Option(ARCH[x]||x,x)));const byModel=new Map();SITES.forEach(x=>{if(!byModel.has(x.model_id))byModel.set(x.model_id,x)});[...byModel].forEach(([key,val])=>$('#metricModel').add(new Option(key.replaceAll('_',' ')+' · '+val.model_size,key)));$('#metricModel').value='qwen3_1_7b_base';$('#overviewProfiles').textContent=new Set(SITES.map(s=>s.sae_id)).size;$('#overviewSites').textContent=SITES.length;}
function render(){const q=$('#searchBox').value.toLowerCase().trim(),f=$('#familySelect').value,a=$('#archSelect').value;const matched=SITES.filter(s=>(f==='all'||family(s.model_id)===f)&&(a==='all'||s.architecture===a)&&(!q||(s.model_id+' '+s.sae_id+' '+s.hook_name).toLowerCase().includes(q)));$('#recordCount').textContent=matched.length+' / '+SITES.length+' records';const tbody=$('#siteRows');tbody.replaceChildren();for(const s of matched){const tr=document.createElement('tr');tr.tabIndex=0;tr.className=selected?.site_id===s.site_id?'selected':'';const m=[s.model_id,s.model_size],vals=[`${s.model_id}<small> ${s.model_size}</small>`,ARCH[s.architecture]||s.architecture,'L'+s.layer,'<span class="status">Passed</span>','<span class="details-link">Inspect ↓</span>'];vals.forEach((v,i)=>{const td=document.createElement('td');if(i===0){td.className='model';td.textContent=m[0]+' · '+m[1];}else if(i===3||i===4)td.innerHTML=v;else td.textContent=v;tr.appendChild(td)});tr.addEventListener('click',()=>pick(s));tr.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();pick(s)}});tbody.appendChild(tr);}if(!matched.length){const tr=document.createElement('tr');const td=document.createElement('td');td.colSpan=5;td.textContent='No matching checkpoint records.';tr.appendChild(td);tbody.appendChild(tr)}}
function pick(s){selected=s;render();let d=$('#siteDetail');d.replaceChildren();const heading=document.createElement('div');heading.className='detail-header';const a=document.createElement('div');const h=document.createElement('h3');h.textContent=s.model_id+' · Layer '+s.layer;a.appendChild(h);const p=document.createElement('p');p.textContent=s.sae_id+' · '+s.hook_name;a.appendChild(p);heading.appendChild(a);const b=document.createElement('a');b.className='details-link';b.href=s.report_url;b.target='_blank';b.rel='noopener';b.textContent='Original report ↗';heading.appendChild(b);d.appendChild(heading);const grid=document.createElement('div');grid.className='detail-metrics';for(const field of ['mean_l0','reconstruction_mse','explained_variance','feature_ablation_logit_delta_l2']){const el=document.createElement('div');const lab=document.createElement('small');lab.textContent=LABEL[field];const val=document.createElement('strong');val.textContent=fmt(s[field]);el.appendChild(lab);el.appendChild(val);grid.appendChild(el)}d.appendChild(grid);const foot=document.createElement('div');foot.className='detail-footer';foot.textContent='Compatibility, benchmark and reliability: passed · 64 evaluation groups · Source commit: '+s.source_commit.slice(0,12);d.appendChild(foot);}
function chart(){if(!SITES.length)return;const m=$('#metricModel').value,field=$('#metricField').value;const rows=SITES.filter(s=>s.model_id===m).sort((a,b)=>a.layer-b.layer);const svg=$('#metricChart');svg.replaceChildren();const NS='http://www.w3.org/2000/svg';const element=(tag,attr,text)=>{let n=document.createElementNS(NS,tag);Object.entries(attr||{}).forEach(([k,v])=>n.setAttribute(k,v));if(text!==undefined)n.textContent=text;svg.appendChild(n);return n};const n=rows.length;const values=rows.map(s=>Number(s[field]));const lo=Math.min(0,...values),hi=Math.max(1e-8,...values),range=(hi-lo)||1;const L=68,R=694,T=25,B=218;
 for(let k=0;k<=4;k++){let y=B-k*(B-T)/4,v=lo+(hi-lo)*k/4;element('line',{x1:L,y1:y,x2:R,y2:y,stroke:'#e2ebee','stroke-width':1});element('text',{x:50,y:y+4,'text-anchor':'end',fill:'#506b7a','font-size':10},fmt(v));}
 const span=(R-L)/n;rows.forEach((s,i)=>{const x=L+span*(i+.5);const y=B-(Number(s[field])-lo)/range*(B-T);element('line',{x1:x,y1:B,x2:x,y2:y,stroke:'#12a69a','stroke-width':Math.min(48,span*.48),'stroke-linecap':'butt',opacity:.82});element('text',{x:x,y:245,'text-anchor':'middle',fill:'#496273','font-size':12},'L'+s.layer);const dot=element('circle',{cx:x,cy:y,r:4,fill:'#116b71'});const title=document.createElementNS(NS,'title');title.textContent='Layer '+s.layer+': '+fmt(s[field]);dot.appendChild(title);});element('text',{x:R,y:14,'text-anchor':'end',fill:'#496273','font-size':10},LABEL[field]);}
['#searchBox','#familySelect','#archSelect'].forEach(q=>$(q).addEventListener('input',render));['#metricModel','#metricField'].forEach(q=>$(q).addEventListener('change',chart));
$('#copyTourCode').addEventListener('click',async()=>{try{await navigator.clipboard.writeText($('#tourCode code').textContent.trim());$('#copyTourCode').textContent='Copied ✓';setTimeout(()=>$('#copyTourCode').textContent='Copy command',1800)}catch{$('#copyTourCode').textContent='Select and copy below';}});
$('#copyCode').addEventListener('click',async()=>{try{await navigator.clipboard.writeText($('#installCode').textContent.trim());$('#copyCode').textContent='Copied ✓';setTimeout(()=>$('#copyCode').textContent='Copy code ↗',1800)}catch{$('#copyCode').textContent='Select and copy text above';}});
fetch('data/sites.json').then(r=>{if(!r.ok)throw Error('The verified site dataset could not be loaded');return r.json()}).then(j=>{SITES=j.sites||[];if(SITES.length!==48)throw Error('Expected 48 verified layer sites, got '+SITES.length);populate();render();chart();pick(SITES.find(x=>x.site_id==='qwen3_1_7b_base:L7')||SITES[0]);}).catch(e=>{const tr=document.createElement('tr'),td=document.createElement('td');td.colSpan=5;td.textContent='Verification data unavailable: '+e.message;tr.appendChild(td);$('#siteRows').appendChild(tr);$('#recordCount').textContent='Dataset load failed'});

// Guided tour: a software-workflow explanation, not live checkpoint execution.
const tourSteps=[
 {label:'Install',title:'Start from the current source',description:'Clone the current SAEBase repository and install the lightweight core. The dashboard evaluation records are separately pinned to the immutable v0.3.0 release.',concept:'SOURCE CODE → LOCAL EXAMPLES',code:'git clone https://github.com/OpenSAE/SAEBase.git\ncd SAEBase\npython -m pip install -e .'},
 {label:'Capture',title:'Capture activations once',description:'Choose the model, tokenizer, hook and token position. Captured activation shards carry identity and checksum records, and can be reused when evaluating different SAE checkpoints at the same site.',concept:'MODEL → TARGET LAYER → ACTIVATION STORE',code:'python examples/activations/activation_store.py'},
 {label:'Encode',title:'Inspect sparse feature codes',description:'Apply a SAE checkpoint to activations. Record reconstruction and feature-count measurements while preserving model and SAE identities.',concept:'ACTIVATION STORE → SAE ENCODE / DECODE',code:'python examples/quickstart/public_api_offline.py'},
 {label:'Intervene',title:'Change a feature, then measure',description:'Ablate, scale or otherwise edit selected feature codes. Compare the model’s downstream behavior with an identity-preserving baseline.',concept:'FEATURE EDIT → PATCH → DOWNSTREAM READOUT',code:'python examples/interventions/batch_interventions.py'},
 {label:'Benchmark',title:'Generate reproducible metrics',description:'A frozen configuration identifies the benchmark workload and its output directory. The first offline experiment writes metric rows, HTML and CSV summaries, and source manifests.',concept:'METRICS + CONFIG → PERSISTENT REPORTS',code:'python examples/quickstart/first_experiment.py --output runs/first-experiment'},
 {label:'Audit',title:'Inspect reliability and provenance',description:'Read back source-bound metric records and grouped reliability audits. Each measured checkpoint evaluation links to source reports and original archived evidence.',concept:'RAW MEASUREMENTS → RELIABILITY AUDIT → VERIFIED REPORT',code:'python examples/benchmarking/reliability_bootstrap.py'}
];
let tourIndex=0;
function renderTour(){const s=tourSteps[tourIndex];$('#tourStepNo').textContent='STEP '+String(tourIndex+1).padStart(2,'0')+' / 06';$('#tourTitle').textContent=s.title;$('#tourDescription').textContent=s.description;$('#tourConcept').textContent=s.concept;$('#tourCode code').textContent=s.code;$('#tourProgress').textContent=(tourIndex+1)+' of 6';$('#tourPrev').disabled=tourIndex===0;$('#tourNext').textContent=tourIndex===5?'Explore actual records ↗':'Next step →';const nav=$('#tourNav');nav.replaceChildren();tourSteps.forEach((step,i)=>{const btn=document.createElement('button');btn.textContent=String(i+1).padStart(2,'0')+'   '+step.label;btn.className='tour-item'+(tourIndex===i?' active':'');btn.onclick=()=>{tourIndex=i;renderTour()};nav.appendChild(btn)});const pipe=$('#tourPipeline');pipe.replaceChildren();['Model','SAE','Intervene','Evaluate'].forEach((name,i)=>{const el=document.createElement('span');el.textContent=name;el.className=i===Math.min(tourIndex,3)?'highlight':'';pipe.appendChild(el)});}
$('#tourPrev').addEventListener('click',()=>{tourIndex=Math.max(0,tourIndex-1);renderTour()});$('#tourNext').addEventListener('click',()=>{if(tourIndex===5){go('explorer')}else{tourIndex++;renderTour()}});renderTour();