From 34a9a307bae69dbdfe4893327775e517a09cfa6e Mon Sep 17 00:00:00 2001
From: Greg Soucy <GREG@COMMANDLAYER.ORG>
Date: Thu, 21 May 2026 08:46:50 -0400
Subject: [PATCH] Match verify and SDK hero badges to capabilities style

---
 public/sdk-records.html | 4 ++--
 public/verify.html      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/sdk-records.html b/public/sdk-records.html
index 9ea876c..1823d81 100644
--- a/public/sdk-records.html
+++ b/public/sdk-records.html
@@ -12,7 +12,7 @@
 <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)}
-  .sdk-hero{padding:76px 0 46px;text-align:center;background:#fff}.sdk-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;border:1px solid rgba(82,152,255,.3);background:rgba(82,152,255,.06);color:var(--purple);font-size:13px;font-weight:700;margin-bottom:18px}
+  .sdk-hero{padding:76px 0 46px;text-align:center;background:#fff}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;border:1px solid rgba(82,152,255,.3);background:rgba(82,152,255,.06);color:var(--purple);font-size:13px;font-weight:700;margin-bottom:18px}.badge-dot{width:8px;height:8px;border-radius:999px;background:var(--blue);box-shadow:0 0 0 4px rgba(82,152,255,.16)}
   .sdk-h1{font-size:clamp(2.2rem,5.2vw,4.3rem);line-height:1.04;letter-spacing:-.04em;margin:0 0 16px;font-weight:800}
   .sdk-sub{color:var(--text-2);font-size:clamp(1rem,2vw,1.2rem);max-width:860px;margin:0 auto 20px;line-height:1.65}
   .hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}.hero-btn{display:inline-flex;padding:10px 14px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text-2);font-weight:700;background:#fff}
@@ -52,7 +52,7 @@
   </div>
 </nav>
 <main>
-<section class="sdk-hero"><div class="container"><div class="sdk-kicker">SDK</div><h1 class="sdk-h1">Add verifiable receipts to agent actions.</h1><p class="sdk-sub">@commandlayer/agent-sdk wraps agent actions and emits canonical metadata.proof receipts that can be checked by CommandLayer verifiers.</p><div class="hero-actions"><a class="hero-btn primary" href="https://github.com/commandlayer/agent-sdk" target="_blank" rel="noopener">View SDK on GitHub</a><a class="hero-btn" href="/verify.html">Verify a receipt</a></div><div class="status"><strong>Wrap an agent action, emit a canonical receipt, and verify the proof.</strong><br/>Runtime production is live. Runtime signs canonical Trust Verification receipts. MCP E2E against production runtime passes: STEP 1 SIGNED, STEP 2 VERIFIED, STEP 3 TAMPERED INVALID. Runtime signer: <code>signer_id = runtime.commandlayer.eth</code>, <code>kid = vC4WbcNoq2znSCiQ</code>. Canonical proof: <code>metadata.proof.canonicalization = json.sorted_keys.v1</code>, <code>metadata.proof.hash.alg = SHA-256</code>, <code>metadata.proof.signature.alg = Ed25519</code>.</div></div></section>
+<section class="sdk-hero"><div class="container"><div class="hero-badge"><span class="badge-dot"></span>SDK Records</div><h1 class="sdk-h1">Add verifiable receipts to agent actions.</h1><p class="sdk-sub">@commandlayer/agent-sdk wraps agent actions and emits canonical metadata.proof receipts that can be checked by CommandLayer verifiers.</p><div class="hero-actions"><a class="hero-btn primary" href="https://github.com/commandlayer/agent-sdk" target="_blank" rel="noopener">View SDK on GitHub</a><a class="hero-btn" href="/verify.html">Verify a receipt</a></div><div class="status"><strong>Wrap an agent action, emit a canonical receipt, and verify the proof.</strong><br/>Runtime production is live. Runtime signs canonical Trust Verification receipts. MCP E2E against production runtime passes: STEP 1 SIGNED, STEP 2 VERIFIED, STEP 3 TAMPERED INVALID. Runtime signer: <code>signer_id = runtime.commandlayer.eth</code>, <code>kid = vC4WbcNoq2znSCiQ</code>. Canonical proof: <code>metadata.proof.canonicalization = json.sorted_keys.v1</code>, <code>metadata.proof.hash.alg = SHA-256</code>, <code>metadata.proof.signature.alg = Ed25519</code>.</div></div></section>
 
 <section class="section section-alt"><div class="container"><div class="section-eyebrow">Install</div><h2 class="section-h2">Install the SDK package.</h2><pre class="code">npm install @commandlayer/agent-sdk
 
diff --git a/public/verify.html b/public/verify.html
index 5c7836c..9762566 100644
--- a/public/verify.html
+++ b/public/verify.html
@@ -12,7 +12,7 @@
 <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)}
-  .verify-hero{padding:72px 0 42px;text-align:center;background:#fff}.verify-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;border:1px solid rgba(82,152,255,.3);background:rgba(82,152,255,.06);color:var(--purple);font-size:13px;font-weight:700;margin-bottom:18px}
+  .verify-hero{padding:72px 0 42px;text-align:center;background:#fff}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;border:1px solid rgba(82,152,255,.3);background:rgba(82,152,255,.06);color:var(--purple);font-size:13px;font-weight:700;margin-bottom:18px}.badge-dot{width:8px;height:8px;border-radius:999px;background:var(--blue);box-shadow:0 0 0 4px rgba(82,152,255,.16)}
   .verify-h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.04;letter-spacing:-.04em;margin:0 0 16px;font-weight:800}
   .verify-sub{color:var(--text-2);font-size:clamp(1rem,2vw,1.2rem);max-width:760px;margin:0 auto 16px;line-height:1.65}
   .hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}.hero-btn{display:inline-flex;padding:10px 14px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text-2);font-weight:700;background:#fff}
@@ -54,7 +54,7 @@
   </div>
 </nav>
 <main>
-<section class="verify-hero"><div class="container"><div class="verify-kicker">Verifier</div><h1 class="verify-h1">Verify agent receipts by proof, not claim.</h1><p class="verify-sub">Paste a CommandLayer receipt, inspect its canonical proof, and confirm whether the hash and Ed25519 signature still match.</p><div class="hero-actions"><a class="hero-btn primary" href="#manual-verifier">Verify a receipt</a><a class="hero-btn" href="/stack-proof-demo.html">View production proof</a></div><div class="proof-status"><strong>Receipts are not trusted by claim. They are verified by proof.</strong><br/>Runtime production is live. Runtime signs canonical Trust Verification receipts. MCP E2E against production runtime passes: STEP 1 SIGNED, STEP 2 VERIFIED, STEP 3 TAMPERED INVALID. Runtime signer: <code>runtime.commandlayer.eth</code> with <code>kid=vC4WbcNoq2znSCiQ</code>. Canonical proof uses <code>metadata.proof.canonicalization=json.sorted_keys.v1</code>, <code>metadata.proof.hash.alg=SHA-256</code>, and <code>metadata.proof.signature.alg=Ed25519</code>.</div></div></section>
+<section class="verify-hero"><div class="container"><div class="hero-badge"><span class="badge-dot"></span>Verifier</div><h1 class="verify-h1">Verify agent receipts by proof, not claim.</h1><p class="verify-sub">Paste a CommandLayer receipt, inspect its canonical proof, and confirm whether the hash and Ed25519 signature still match.</p><div class="hero-actions"><a class="hero-btn primary" href="#manual-verifier">Verify a receipt</a><a class="hero-btn" href="/stack-proof-demo.html">View production proof</a></div><div class="proof-status"><strong>Receipts are not trusted by claim. They are verified by proof.</strong><br/>Runtime production is live. Runtime signs canonical Trust Verification receipts. MCP E2E against production runtime passes: STEP 1 SIGNED, STEP 2 VERIFIED, STEP 3 TAMPERED INVALID. Runtime signer: <code>runtime.commandlayer.eth</code> with <code>kid=vC4WbcNoq2znSCiQ</code>. Canonical proof uses <code>metadata.proof.canonicalization=json.sorted_keys.v1</code>, <code>metadata.proof.hash.alg=SHA-256</code>, and <code>metadata.proof.signature.alg=Ed25519</code>.</div></div></section>
 <section class="section"><div class="container"><div class="section-eyebrow">What gets checked</div><h2 class="section-h2">Manual verifier checks, not just shape.</h2><div class="cards"><div class="card">Receipt structure</div><div class="card">Canonical metadata.proof envelope</div><div class="card">json.sorted_keys.v1 canonical hash</div><div class="card">SHA-256 hash match</div><div class="card">Ed25519 signature validity</div><div class="card">Signer identity and key id</div><div class="card">Supported capability verb</div><div class="card">Tamper resistance</div></div><div class="warn">A receipt is only verified when hash and signature checks pass. Schema-valid alone is not verified.</div></div></section>
 <section class="verifier-section" id="manual-verifier"><div class="container layout"><div class="tool-card"><label class="label" for="receiptInput">Manual verifier input</label><textarea id="receiptInput" spellcheck="false" placeholder="Paste a CommandLayer receipt JSON here..."></textarea><div class="btn-row"><button id="loadSampleBtn">Load Sample</button><button id="loadTamperedBtn">Load Tampered</button><button id="clearBtn">Clear</button><button class="primary" id="verifyBtn">Verify</button></div></div><div class="tool-card"><div class="result-card" id="resultCard"><div class="result-state" id="resultState">—</div><div class="result-note" id="resultNote">Run verification to see verdict.</div></div><ul class="checks" id="checksList"></ul><div class="meta" id="metaRows"></div></div></div></section>
 <section class="section"><div class="container"><div class="section-eyebrow">Proof surfaces</div><div class="cards"><div class="card"><h3>Manual verifier</h3><p>Paste a receipt and inspect every verification check.</p></div><div class="card"><h3>Proof URLs</h3><p>Open a receipt verification result from a shareable URL.</p></div><div class="card"><h3>Embedded badges</h3><p>Display verified/invalid state inside an app or product UI.</p></div><div class="card"><h3>Ambient verification</h3><p>Let systems verify receipts automatically through SDKs, APIs, webhooks, MCP tools, or agent-to-agent flows.</p></div></div></div></section>