index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>BrowserProof — verification for AI browser agents</title><meta name="description" content="Verify AI browser agents and Playwright workflows with explicit assertions, evidence hashes, HTML reports and CI-ready pass/fail results."><link rel="canonical" href="https://yashkhou.com/projects/browserproof"><meta property="og:type" content="website"><meta property="og:url" content="https://yashkhou.com/projects/browserproof"><meta property="og:site_name" content="BrowserProof"><meta name="author" content="Yash"><meta name="twitter:title" content="BrowserProof — verification for AI browser agents"><meta name="twitter:description" content="Verify AI browser agents and Playwright workflows with explicit assertions, evidence hashes, HTML reports and CI-ready pass/fail results."><meta property="og:title" content="BrowserProof — verification for AI browser agents"><meta property="og:description" content="Verify AI browser agents and Playwright workflows with explicit assertions, evidence hashes, HTML reports and CI-ready pass/fail results."><meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@yashkhou"><meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1"><style>:root{--accent:#ff5a45;--accent2:#ffb454}*{box-sizing:border-box}html{background:#090a0c;color:#f4f3ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}body{margin:0;background:radial-gradient(circle at 80% -20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 42rem),#090a0c;color:#f4f3ee}.noise{position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:linear-gradient(90deg,transparent 49.5%,#fff 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#fff 50%,transparent 50.5%);background-size:4px 4px;mix-blend-mode:soft-light}.shell{width:min(1180px,calc(100% - 48px));margin:auto}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d2f34;font:700 11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}.mark{display:flex;gap:10px;align-items:center}.dot{width:10px;height:10px;background:var(--accent);transform:rotate(45deg);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 65%,transparent)}.links{display:flex;gap:24px;color:#9b9da5}.hero{display:grid;grid-template-columns:1.25fr .75fr;min-height:558px;border-bottom:1px solid #2d2f34}.hero-copy{padding:74px 54px 52px 0;border-right:1px solid #2d2f34;display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font:700 10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;color:var(--accent)}h1{font-size:clamp(58px,8vw,112px);line-height:.84;letter-spacing:-.072em;margin:18px 0 28px;font-weight:650}.lead{max-width:760px;color:#aaabb1;font-size:20px;line-height:1.5}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.chip{text-decoration:none;border:1px solid #34363b;padding:8px 10px;font:650 10px ui-monospace,SFMono-Regular,monospace;color:#b8bac0}.panel{position:relative;overflow:hidden;padding:32px;background:#111216}.panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:38px 38px}.panel-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}.panel-label{display:flex;justify-content:space-between;color:#858892;font:700 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em}.visual{display:grid;gap:12px;margin:30px 0}.node{border:1px solid #34363b;background:#0c0d10;padding:15px;position:relative}.node strong{display:block;font:700 12px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em}.node span{display:block;color:#838690;font-size:12px;margin-top:5px}.node:before{content:"";position:absolute;left:-1px;top:-1px;width:6px;height:6px;background:var(--accent)}.arrow{text-align:center;color:var(--accent);font:700 15px ui-monospace,monospace}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #34363b}.metric{padding:14px 0}.metric+.metric{padding-left:12px;border-left:1px solid #34363b}.metric b{display:block;font-size:17px}.metric small{color:#777a83;font:600 8px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em}.section{padding:54px 0;border-bottom:1px solid #2d2f34}.section-grid{display:grid;grid-template-columns:180px 1fr;gap:34px}.section-label{color:#737680;font:700 9px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}.features{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #34363b}.feature{padding:18px 18px 18px 0;border-bottom:1px solid #34363b;color:#d4d5d8}.feature:nth-child(even){border-left:1px solid #34363b;padding-left:18px}.terminal{background:#0d0e11;border:1px solid #34363b;padding:24px;box-shadow:inset 3px 0 var(--accent);font:500 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d8d9dc;white-space:pre-wrap}.footer a{color:inherit;text-decoration:none}.footer{height:86px;display:flex;align-items:center;justify-content:space-between;color:#70737b;font:700 9px ui-monospace,monospace;letter-spacing:.12em}.demo-body{min-height:100vh;display:grid;place-items:center;padding:38px;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 36rem),#090a0c}.demo-card{width:min(1080px,100%);border:1px solid #35373d;background:#0d0e11;box-shadow:0 30px 120px #0009}.demo-head{height:62px;border-bottom:1px solid #35373d;display:flex;align-items:center;justify-content:space-between;padding:0 22px}.lights{display:flex;gap:7px}.lights i{width:8px;height:8px;border-radius:50%;background:#444}.lights i:first-child{background:var(--accent)}.demo-title{font:700 10px ui-monospace,monospace;letter-spacing:.13em;color:#8c8f97}.demo-grid{display:grid;grid-template-columns:1fr 310px}.demo-terminal{padding:32px;min-height:470px;white-space:pre-wrap;font:500 15px/1.75 ui-monospace,monospace;color:#d9dade}.demo-side{border-left:1px solid #35373d;padding:28px;background:#111216}.status{font:800 54px/1 ui-monospace,monospace;color:var(--accent);letter-spacing:-.08em}.status-sub{margin-top:10px;color:#898c94;font-size:12px}.evidence{margin-top:34px;border-top:1px solid #35373d}.evidence div{padding:14px 0;border-bottom:1px solid #2b2d32}.evidence b{display:block;font:700 10px ui-monospace,monospace}.evidence span{display:block;margin-top:5px;color:#767982;font-size:11px}@media(max-width:800px){.hero,.demo-grid{grid-template-columns:1fr}.hero-copy{border-right:0}.panel,.demo-side{border-left:0}.section-grid{grid-template-columns:1fr}}</style><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","name":"browserproof","description":"Verify AI browser agents and Playwright workflows with explicit assertions, evidence hashes, HTML reports and CI-ready pass/fail results.","codeRepository":"https://github.com/yashkhou/browserproof","url":"https://yashkhou.com/projects/browserproof","license":"https://opensource.org/licenses/MIT","programmingLanguage":"TypeScript","author":{"@type":"Person","name":"Yash","url":"https://github.com/yashkhou"},"keywords":["browser-automation","browser-agent","ai-agents","computer-use","playwright","playwright-testing","verification","agent-verification","ai-testing","evidence","ci","typescript"],"isAccessibleForFree":true}</script></head><body><div class="noise"></div><div class="shell"><nav class="nav"><div class="mark"><span class="dot"></span>BROWSERPROOF</div><div class="links"><span>YASH / YK</span><span>MIT · 2026</span></div></nav><section class="hero"><div class="hero-copy"><div><div class="eyebrow">BROWSER AUTOMATION / VERIFICATION</div><h1>BrowserProof</h1><p class="lead">Proof, not vibes, for browser agents. Evidence-first verification for AI browser automation. Assert the final state, capture the screenshot, hash the evidence, and fail loudly when reality does not match the claim.</p><div class="chips"><a class="chip" href="https://github.com/yashkhou/browserproof">SOURCE ↗</a><a class="chip" href="./real-report.html">REAL DEMO ↗</a><a class="chip" href="https://yashkhou.com/projects/browserproof">PROJECT PAGE ↗</a></div></div></div><aside class="panel"><div class="panel-inner"><div class="panel-label"><span>SYSTEM MAP</span><span>LIVE</span></div><div class="visual"><div class="node"><strong>AGENT</strong><span>runs task</span></div><div class="arrow">↓</div><div class="node"><strong>BROWSER</strong><span>real state</span></div><div class="arrow">↓</div><div class="node"><strong>PROOF</strong><span>assert + hash</span></div><div class="arrow">↓</div><div class="node"><strong>REPORT</strong><span>portable evidence</span></div></div><div class="metrics"><div class="metric"><b>05</b><small>assertion types</small></div><div class="metric"><b>SHA-256</b><small>evidence hash</small></div><div class="metric"><b>CI</b><small>exit codes</small></div></div></div></aside></section><section class="section"><div class="section-grid"><div class="section-label">01 / capabilities</div><div class="features"><div class="feature">URL + title assertions</div><div class="feature">Visible selector checks</div><div class="feature">Text and input-value proof</div><div class="feature">Final screenshot evidence</div><div class="feature">JSON + HTML proof reports</div><div class="feature">Deterministic CI failure</div></div></div></section><section class="section"><div class="section-grid"><div class="section-label">02 / quick demo</div><pre class="terminal">$ browserproof run checkout.json
✓ urlIncludes       /checkout/success
✓ titleIncludes     Order confirmed
✓ selectorVisible   [data-order-id]
✓ text              Thanks for your order

PASS  https://shop.test/checkout/success
proof browserproof-artifacts/report.html
sha256  71f0a8f9…b42c</pre></div></section><footer class="footer"><span>github.com/yashkhou/browserproof</span><span><a href="https://github.com/yashkhou/browserproof">BrowserProof</a> · <a href="https://github.com/yashkhou/runledger">RunLedger</a> · <a href="https://github.com/yashkhou/actionmesh">ActionMesh</a></span></footer></div></body></html>