Skip to content

Restyle public/proof.html to match canonical CommandLayer site layout #348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GsCommand merged 1 commit into from
May 25, 2026
Merged

Restyle public/proof.html to match canonical CommandLayer site layout #348

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 107 additions & 75 deletions public/proof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Proof | CommandLayer</title>
<meta name="description" content="Live proof flows for CommandLayer receipts — runtime signs, verifier validates, tampering is rejected, and paid actions produce signed execution receipts." />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/site.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Proof | CommandLayer</title>
<meta name="description" content="Live proof flows for CommandLayer receipts — runtime signs, verifier validates, tampering is rejected, and paid actions produce signed execution receipts." />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/css/site.css" />
<style>
.brand{gap:0}.brand img{height:68px;width:auto;object-fit:contain}.brand span{display:none}.nav-links a.active{color:var(--text);background:var(--surface)}
.hero{padding:84px 0 64px;background:radial-gradient(1200px 360px at 50% -10%,rgba(82,152,255,.15),transparent 70%),#fff;text-align:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 14px}
.hero p{max-width:920px;margin:0 auto;color:var(--text-2);font-size:1.06rem;line-height:1.7}
.hero-actions{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.section{padding:56px 0}
.section-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(99,91,255,.07)}
.card h3{margin:0 0 8px;font-size:1.04rem}
.card p{margin:0;color:var(--text-2);line-height:1.6}
.list{margin:8px 0 0;padding-left:18px;color:var(--text-2);line-height:1.8}
.status-block{background:#0E1322;color:#E2E8F0;border:1px solid rgba(30,41,59,.45);border-radius:14px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;line-height:1.8}
.status-block strong{color:#fff}
.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
footer{border-top:1px solid var(--border);background:#fff}.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px 0}.footer-grid h4{font-size:14px;margin-bottom:10px}.footer-grid a{display:block;color:var(--text-2);margin:8px 0;font-size:14px}
@media(max-width:900px){.section-grid,.link-grid{grid-template-columns:1fr}.hero{padding:62px 0 42px}}
.nav-links a:hover,.nav-drop:hover>a,.nav-drop:focus-within>a,.nav-drop>a.active{color:var(--text);background:var(--surface)}.nav-drop{position:relative}.nav-drop>a{display:inline-flex;align-items:center;gap:4px}.nav-drop-menu{position:absolute;top:calc(100% - 1px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(15,23,42,.12);padding:8px;display:none;min-width:260px;z-index:200}.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}.nav-drop-menu a{display:block;white-space:nowrap}.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:grid}@media(max-width:900px){.nav-drop{width:100%}.nav-drop-menu{position:static;display:grid;margin-top:2px;min-width:0;box-shadow:none}}
</style>
</head>
<body>
<nav class="site-nav">
<div class="container">
<a href="/">CommandLayer</a>
<a href="/protocol.html">Protocol</a>
<a href="/capabilities.html">Capabilities</a>
<a href="/proof.html" aria-current="page">Live Proof</a>
<a href="/receipts.html">Receipts</a>
<a href="/verify.html">Verifier</a>
<a href="/sdk-records.html">SDK</a>
</div>
</nav>
<nav>
<div class="container nav-inner">
<a href="/" class="brand"><img src="/commandlayer-logo.png" alt="CommandLayer" /><span>CommandLayer</span></a>
<ul class="nav-links"><li><a href="/">Home</a></li><li><a href="/protocol.html">Protocol</a></li><li><a href="/capabilities.html">Capabilities</a></li><li><a href="/receipts.html">Receipts</a></li><li><a href="/proof.html" class="active">Live Proof</a></li><li><a href="/sdk-records.html">SDK</a></li><li class="nav-drop"><a href="/docs.html" aria-haspopup="true">Docs ▾</a><div class="nav-drop-menu"><a href="/docs.html">Docs Home</a><a href="/docs/wrap-your-agent.html">Wrap Your Agent</a><a href="/protocol.html">Protocol</a><a href="/capabilities.html">Capabilities</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a><a href="/runtime.html">Runtime</a><a href="/mcp.html">MCP Bridge</a><a href="/schemas.html">Schemas</a><a href="/api.html">API Reference</a><a href="/integrations.html">Integrations</a><a href="/verify.html">Verifier</a><a href="/claim.html">Claim / Namespace Activation</a></div></li><li><a href="/claim.html">Claim</a></li><li><a href="https://github.com/commandlayer" target="_blank" rel="noopener">GitHub</a></li></ul>
</div>
</nav>

<main class="container" style="padding:48px 0 72px; max-width: 980px;">
<header style="margin-bottom:30px;">
<h1>Live Proof</h1>
<main>
<section class="hero">
<div class="container">
<div class="hero-badge"><span class="badge-dot"></span>Live Proof</div>
<h1>Live proof for signed CommandLayer receipts</h1>
<p>The runtime signs. The verifier validates. Tampering is rejected. These demos show CommandLayer receipts moving from action/event to signed proof to independent verification.</p>
</header>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="/proof-flow-composer.html">Run Full Proof Flow</a>
<a class="btn btn-secondary btn-lg" href="/webhook-auto-verify.html">Try Auto Verify</a>
<a class="btn btn-secondary btn-lg" href="/receipts.html">Read Receipts</a>
</div>
</div>
</section>

<section style="margin-bottom:28px;">
<h2>Trust boundary upfront</h2>
<section class="section"><div class="container">
<div class="card">
<h3>Trust boundary upfront</h3>
<p>The Coinbase webhook step in browser demos is simulated because real Coinbase delivery requires COINBASE_WEBHOOK_SECRET server-side. The x402 paid-action and verifier steps are live network calls. x402 runs in demo_accepted_envelope mode by default; provider_verified mode requires X402_PROVIDER_VERIFICATION_URL. Demo mode is not real settlement.</p>
</section>

<section style="margin-bottom:28px;">
<h2>Automatic verification</h2>
<p>Generate a receipt, verify it, tamper with it, and watch verification fail.</p>
<p><a href="/webhook-auto-verify.html">Automatic Webhook Verification</a></p>
</section>

<section style="margin-bottom:28px;">
<h2>Full proof flow</h2>
<p>Simulated Coinbase event → live x402 signed endpoint → action execution → live verifier.</p>
<p><a href="/proof-flow-composer.html">Full Proof Flow Composer</a></p>
<p>Successful runs should show <code>status: VERIFIED</code>, <code>public_key_source: ens_txt</code>, <code>ens_resolved: true</code>, <code>hash_matches: true</code>, and <code>signature_valid: true</code>.</p>
</section>

<section style="margin-bottom:28px;">
<h2>What each step proves</h2>
<ul>
<li><strong>Coinbase:</strong> event authenticity to server via HMAC; public portability begins after CommandLayer signing.</li>
<li><strong>x402:</strong> payment rail proves payment acceptance/settlement; CommandLayer proves execution result.</li>
<li><strong>Verify:</strong> ENS TXT public key, hash check, Ed25519 signature check.</li>
</ul>
</section>

<section style="margin-bottom:28px;">
<h2>What this does not replace</h2>
<ul>
<li>sender authentication for production webhooks</li>
<li>replay protection</li>
<li>rate limiting</li>
<li>real settlement unless provider_verified mode is configured</li>
<li>schema validation alone</li>
</ul>
</section>
</div>
</div></section>

<section>
<h2>Where to go next</h2>
<ul>
<li><a href="/receipts.html">Read Receipts</a></li>
<li><a href="/verify.html">Try Verifier</a></li>
<li><a href="/integrations.html">Explore Integrations</a></li>
<li><a href="/protocol.html">Explore Protocol</a></li>
</ul>
</section>
</main>
<section class="section" style="background:#f8faff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)"><div class="container">
<div class="section-grid">
<article class="card">
<h3>Automatic verification</h3>
<p>Generate a receipt, verify it, tamper with it, and watch verification fail.</p>
<p style="margin-top:10px"><a href="/webhook-auto-verify.html">Automatic Webhook Verification → /webhook-auto-verify.html</a></p>
</article>
<article class="card">
<h3>Full proof flow</h3>
<p>Simulated Coinbase event → live x402 signed endpoint → action execution → live verifier.</p>
<p style="margin-top:10px"><a href="/proof-flow-composer.html">Full Proof Flow Composer → /proof-flow-composer.html</a></p>
</article>
</div>
</div></section>

<footer>
<div class="container" style="padding:24px 0;">
<a href="/protocol.html">Protocol</a> ·
<a href="/capabilities.html">Capabilities</a> ·
<a href="/proof.html">Live Proof</a> ·
<a href="/receipts.html">Receipts</a> ·
<a href="/verify.html">Verifier</a>
<section class="section"><div class="container">
<div class="section-grid">
<article class="card">
<h3>What each step proves</h3>
<ul class="list">
<li>Coinbase: event authenticity to server via HMAC; public portability begins after CommandLayer signing.</li>
<li>x402: payment rail proves payment acceptance or settlement; CommandLayer proves execution result.</li>
<li>Verify: ENS TXT public key, canonical hash check, Ed25519 signature check.</li>
</ul>
</article>
<article class="card">
<h3>Successful verification fields</h3>
<div class="status-block"><strong>status:</strong> VERIFIED
<strong>public_key_source:</strong> ens_txt
<strong>ens_resolved:</strong> true
<strong>hash_matches:</strong> true
<strong>signature_valid:</strong> true</div>
</article>
<article class="card">
<h3>What this does not replace</h3>
<ul class="list">
<li>sender authentication for production webhooks</li>
<li>replay protection</li>
<li>rate limiting</li>
<li>real settlement unless provider_verified mode is configured</li>
<li>schema validation alone</li>
</ul>
</article>
<article class="card">
<h3>Where to go next</h3>
<ul class="list">
<li><a href="/receipts.html">Receipts → /receipts.html</a></li>
<li><a href="/verify.html">Verifier → /verify.html</a></li>
<li><a href="/integrations.html">Integrations → /integrations.html</a></li>
<li><a href="/protocol.html">Protocol → /protocol.html</a></li>
<li><a href="/capabilities.html">Capabilities → /capabilities.html</a></li>
</ul>
</article>
</div>
</footer>
</div></section>
</main>

<footer><div class="container footer-grid"><div><h4>Product</h4><a href="/protocol.html">Protocol</a><a href="/capabilities.html">Capabilities</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a><a href="/integrations.html">Integrations</a><a href="/sdk-records.html">SDK</a><a href="/claim.html">Claim</a></div><div><h4>Developers</h4><a href="/docs.html">Docs</a><a href="/docs/wrap-your-agent.html">Wrap Your Agent</a><a href="/runtime.html">Runtime</a><a href="/mcp.html">MCP Bridge</a><a href="/schemas.html">Schemas</a><a href="/api.html">API Reference</a><a href="https://github.com/commandlayer" target="_blank" rel="noopener">GitHub</a></div><div><h4>Proof</h4><a href="/verify.html">Verifier</a><a href="/stack-proof-demo.html">Production Proof</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a></div></div></footer>
</body>
</html>
Loading