A pipeline you can reconcile
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>A pipeline you can reconcile</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}input[type=range]{padding:0}pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.metric{font-size:42px;font-weight:750;line-height:1.15;letter-spacing:-.035em}.caption{font-size:13px;color:#55656b}.readout{font:15px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.strip{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.chip{padding:5px 10px;background:#e5eaf0;border-radius:5px;font-size:13px}button[aria-pressed=true]{background:#263b50;color:white}.subtle{background:#f6f7f7}.fileCode{min-height:230px;font:14px/1.6 ui-monospace,Consolas,monospace}.wideButton{width:100%}.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}svg{max-width:100%}.nowrap{white-space:nowrap}.dashboard{padding:26px;background:#fff;border:1px solid #d9dfe6;border-radius:12px}.dashboard .strip{justify-content:space-between;border-bottom:1px solid #dce1e5;padding-bottom:22px}.stage{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(145px,1fr);gap:20px;align-items:center;margin:21px 0}.barTrack{height:16px;background:#edf0f3;border-radius:3px;overflow:hidden}.barFill{height:100%;background:#596f8a;border-radius:3px}.application{display:grid;grid-template-columns:90px 1fr 1.5fr;gap:20px;padding:15px 0;border-top:1px solid #dce1e5}@media(max-width:600px){.stage{grid-template-columns:80px 1fr;gap:8px}.stage>div:last-child{grid-column:2}.application{grid-template-columns:1fr;gap:4px}.metric{font-size:31px}.dashboard{padding:18px}}</style></head><body><main><header><div class="eyebrow">R1 · Application snapshot · October 13, 2026</div><h1>A pipeline you can reconcile</h1></header>
<section class="dashboard"><div class="strip"><div><span class="eyebrow">Current active</span><div class="metric">4 applications</div></div><div><span class="eyebrow">Withdrawn, separate</span><div class="metric">1</div></div></div><div class="buttons"><button id="current" aria-pressed="true">Current active</button><button id="history" aria-pressed="false">Explicit stage history</button></div><h2 id="viewTitle" class="below">Current active · C1, C2, C3, C4</h2><div id="bars"></div><p id="definition" class="muted"></p></section>
<section class="panel below"><h2>Source applications · R1</h2><div id="applications"></div><p class="note"><strong>C4 moved directly from Review to Offer.</strong> No Interview event is supplied. C5's earlier Review visit stays in history after withdrawal.</p></section><section class="panel below"><h2>Counting boundary</h2><p>Current stages are mutually exclusive. Historical stage memberships overlap; 5 + 1 + 1 is seven memberships across five application IDs.</p><p class="muted">Tests is not configured for R1. A configured stage with no matching records would show zero. Missing evidence needs investigation. Offer is not an accepted offer or hire, and this unfinished snapshot supplies no conversion rate or applicant ranking.</p><a href="https://support.greenhouse.io/hc/en-us/articles/204636805-Current-pipeline-per-job">Greenhouse current/history and linear-progression caveat</a></section><footer class="muted below">Local working copy · Changes are not saved after this page closes.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));const decimal=s=>{const raw=String(s).trim();if(!/^[0-9]+(?:[.][0-9]{1,6})?$/.test(raw)||!Number.isFinite(+raw)||+raw>1000000)throw Error('Use a number from 0 to 1,000,000 with at most six decimal places. Blank is missing.');return +raw};const display=n=>n>0&&n<0.000001?n.toExponential(6):Number(n.toFixed(6)).toString();const download=(name,content,type='text/plain')=>{const url=URL.createObjectURL(new Blob([content],{type})),a=document.createElement('a');a.href=url;a.download=name;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000)};
const rows=[{id:'C1',role:'R1',current:'Review',active:true,events:['Review']},{id:'C2',role:'R1',current:'Review',active:true,events:['Review']},{id:'C3',role:'R1',current:'Interview',active:true,events:['Review','Interview']},{id:'C4',role:'R1',current:'Offer',active:true,events:['Review','Offer']},{id:'C5',role:'R1',current:'Withdrawn',active:false,events:['Review']}],configured=['Review','Interview','Offer'];
function counts(records,mode,role='R1',stages=configured){if(!['current','history'].includes(mode))throw Error('Unknown counting view');const scoped=records.filter(r=>r.role===role);return ['Review','Interview','Offer','Tests'].map(stage=>({stage,ids:stages.includes(stage)?[...new Set(scoped.filter(r=>mode==='current'?r.active&&r.current===stage:r.events.includes(stage)).map(r=>r.id))]:null}))}
function render(mode){for(const id of ['current','history'])$(id).setAttribute('aria-pressed',String(id===mode));const data=counts(rows,mode),max=mode==='current'?4:5;text('viewTitle',mode==='current'?'Current active · C1, C2, C3, C4':'Explicit stage history · C1–C5, including withdrawn');text('definition',mode==='current'?'2 + 1 + 1 = 4 active applications. C5 is withdrawn and excluded from these bars.':'Count each application once per explicitly recorded stage. These overlapping counts are not unique people.');$('bars').innerHTML=data.map(r=>'<div class="stage"><strong>'+r.stage+'</strong><div class="barTrack">'+(r.ids?'<div class="barFill" style="width:'+(r.ids.length/max*100)+'%"></div>':'')+'</div><div><strong>'+(r.ids?r.ids.length:'Not configured')+'</strong><br><span class="caption">'+(r.ids?(r.ids.join(', ')||'No matching IDs'):'Absent from R1 stage configuration')+'</span></div></div>').join('');$('applications').innerHTML=rows.map(r=>'<div class="application"><strong>'+r.id+' · '+r.role+'</strong><span>'+r.current+' · '+(r.active?'Active':'Withdrawn')+'</span><span class="muted">Recorded: '+r.events.join(' → ')+(r.id==='C4'?' · Direct jump':r.id==='C5'?' → withdrawal':'')+'</span></div>').join('');return data}
on('current','click',()=>render('current'));on('history','click',()=>render('history'));window.app={counts,render,rows};render('current');
})();
</script></body></html>