From 1ab191eecb2795e3912c5acce81af78288bdb45d Mon Sep 17 00:00:00 2001 From: Greg Soucy Date: Thu, 21 May 2026 19:01:27 -0400 Subject: [PATCH] style: elevate homepage live protocol proof centerpiece --- public/index.html | 84 +++++++++++++++++++++++++++++------------------ 1 file changed, 52 insertions(+), 32 deletions(-) diff --git a/public/index.html b/public/index.html index d1c36be..7090dc4 100644 --- a/public/index.html +++ b/public/index.html @@ -558,6 +558,21 @@ transition: width 0.4s ease; } + + .live-proof-intro { padding: 72px 0 28px; text-align:center; } + .live-proof-intro h2 { font-size: clamp(2rem,4vw,3.2rem); line-height:1.15; letter-spacing:-0.03em; } + .live-proof-intro .grad { background: linear-gradient(100deg,#2563eb,#7c3aed); -webkit-background-clip:text; color:transparent; } + .live-proof { background: linear-gradient(180deg,#fff 0%, #f4f7ff 55%, #f6f0ff 100%); } + .live-proof-card { max-width: 980px; margin:0 auto; background:#fff; border:1px solid #dbe4ff; border-radius:24px; box-shadow:0 18px 48px rgba(37,99,235,.1); padding:36px; } + .live-proof-header .section-eyebrow { display:inline-block; padding:6px 12px; border-radius:999px; background:#eef2ff; border:1px solid #c7d2fe; } + .lp-rows{ display:grid; gap:12px; margin:28px 0; } .lp-row{display:flex; justify-content:space-between; gap:18px; padding:16px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc;} + .lp-row-main{display:flex; align-items:center; gap:10px;} .lp-label{font-weight:700; font-size:1rem;} .lp-meta{color:#475569; margin-top:6px;} .lp-result{font-family:monospace; font-size:12px; color:#334155;align-self:center;} + .lp-state{padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase;} + .lp-row.pending .lp-state{background:#e2e8f0;color:#475569;} .lp-row.running .lp-state{background:#ddd6fe;color:#5b21b6;} .lp-row.passed .lp-state{background:#dcfce7;color:#166534;} .lp-row.failed .lp-state{background:#fee2e2;color:#991b1b;} + .lp-grid{display:grid;grid-template-columns:1fr 1fr; gap:14px; margin:22px 0;} .lp-panel{border-radius:14px;padding:16px;border:1px solid #e2e8f0;} .lp-panel-valid{background:#f0fdf4;border-color:#bbf7d0;} .lp-panel-invalid{background:#fff7ed;border-color:#fed7aa;} + .lp-kv .status{font-size:1.2rem;font-weight:800;} .lp-kv .line{margin-top:6px;color:#334155;} .lp-note{margin-top:18px;padding:14px 16px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;line-height:1.6;} + .lp-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;} + /* ── HOW IT WORKS ─────────────────────────────── */ .how-section { border-top: 1px solid var(--border); @@ -1158,26 +1173,34 @@

Verifying… -

The animation above explains the model. The live proof below runs it.

+ + + +
+
+

From preview to production

+

The animation above explains the model.
The live proof below runs it.

-

Live Protocol Proof

-

Resolve. Sign. Verify. Tamper. Reject.

-

This is not a mock animation. The homepage calls the production runtime, verifies the returned receipt, then tampers with the payload and verifies again.

+
+

LIVE PROTOCOL PROOF

+

Resolve. Sign. Verify. Tamper. Reject.

+

This is not a mock animation. The homepage calls the production runtime, verifies the returned receipt, tampers with the payload, and verifies again.

+
-
Resolve / identify signer
pending
pending
-
Sign
pending
pending
-
Verify
pending
pending
-
Tamper
pending
pending
-
Reject
pending
pending
+
1. Resolvepending
Identify runtime signer identity
waiting for runtime.commandlayer.eth
+
2. Signpending
Call runtime and receive signed metadata.proof
waiting for signed payload
+
3. Verifypending
Verifier recomputes json.sorted_keys.v1 + SHA-256 + Ed25519
waiting for verifier response
+
4. Tamperpending
Mutate canonical payload bytes
waiting for mutation step
+
5. Rejectpending
Verifier should reject tampered receipt
waiting for invalid result
-

Original receipt

waiting...
-

Tampered receipt

waiting...
+

Original receipt

waiting...
+

Tampered receipt

waiting...
Show raw JSON
No data yet.
@@ -1445,62 +1468,59 @@

Trust the proof.
Not the agent.

const knownKid = 'vC4WbcNoq2znSCiQ'; const stateEls = Object.fromEntries(['resolve','sign','verify','tamper','reject'].map(k => [k, document.querySelector(`[data-live-state="${k}"]`)])); const metaEls = Object.fromEntries(['resolve','sign','verify','tamper','reject'].map(k => [k, document.querySelector(`[data-live-meta="${k}"]`)])); + const resultEls = Object.fromEntries(['resolve','sign','verify','tamper','reject'].map(k => [k, document.querySelector(`[data-live-result="${k}"]`)])); const rowEls = Object.fromEntries(['resolve','sign','verify','tamper','reject'].map(k => [k, document.querySelector(`[data-live-step="${k}"]`)])); const validSummary = document.getElementById('lp-valid-summary'); const invalidSummary = document.getElementById('lp-invalid-summary'); const raw = document.getElementById('lp-raw-json'); const err = document.getElementById('lp-error'); const compact = v => typeof v === 'string' && v.length > 18 ? `${v.slice(0,10)}…${v.slice(-8)}` : String(v ?? 'n/a'); - const setStep = (name, status, meta) => { rowEls[name].className = `lp-row ${status}`; stateEls[name].textContent = status; metaEls[name].textContent = meta; }; - const normalize = r => ({ status: r?.status || (r?.ok === true ? 'VALID' : 'INVALID'), hash_matches: r?.hash_matches, signature_valid: r?.signature_valid }); + const setStep = (name, status, meta, result) => { rowEls[name].className = `lp-row ${status}`; stateEls[name].textContent = status; metaEls[name].textContent = meta; if (resultEls[name] && result) resultEls[name].textContent = result; }; + const valueOrDash = v => (v === true || v === false ? String(v) : 'not returned'); + const pickCheck = (r, k) => r?.[k] ?? r?.checks?.[k] ?? r?.result?.[k]; + const normalize = r => ({ status: r?.status || (r?.ok === true ? 'VALID' : 'INVALID'), hash_matches: pickCheck(r,'hash_matches'), signature_valid: pickCheck(r,'signature_valid') }); const isValid = r => r?.ok === true || r?.status === 'VALID' || r?.status === 'VERIFIED'; async function runLive() { err.style.display = 'none'; - ['resolve','sign','verify','tamper','reject'].forEach(k => setStep(k,'pending','pending')); - setStep('resolve','running','Signer identity loaded'); + ['resolve','sign','verify','tamper','reject'].forEach(k => setStep(k,'pending','pending','waiting...')); + setStep('resolve','running','resolving signer identity...','querying runtime.commandlayer.eth'); await Promise.resolve(); - setStep('resolve','passed',`signer_id=${signerId} · kid=${knownKid}`); + setStep('resolve','passed',`runtime.commandlayer.eth · kid=${knownKid}`,'resolved signer identity'); let receipt; try { - setStep('sign','running','POST /trust-verification/sign/v1.0.0'); + setStep('sign','running','calling production runtime sign endpoint...','POST https://runtime.commandlayer.org/trust-verification/sign/v1.0.0'); const signResp = await fetch(`${runtimeBase}/trust-verification/sign/v1.0.0`, { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({ payload:{ message:'homepage live proof', source:'commandlayer.org', ts:new Date().toISOString() } }) }); const signJson = await signResp.json(); receipt = signJson?.receipt || signJson?.final_receipt; if (!signResp.ok || !receipt) throw new Error('TRANSPORT_ERROR'); const proof = receipt?.metadata?.proof || {}; - setStep('sign','passed',`verb=${receipt?.verb||'n/a'} class=${receipt?.class||'n/a'} hash=${compact(proof?.hash?.value)} kid=${proof?.signature?.kid||'n/a'} signer_id=${proof?.signer_id||'n/a'}`); + setStep('sign','passed',`runtime signed metadata.proof`,`verb=${receipt?.verb||'n/a'} hash=${compact(proof?.hash?.value)} kid=${proof?.signature?.kid||'n/a'} signer_id=${proof?.signer_id||'n/a'}`); - setStep('verify','running','POST /verify'); + setStep('verify','running','verifying original receipt...','POST https://runtime.commandlayer.org/verify'); const verifyResp = await fetch(`${runtimeBase}/verify`, { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({ receipt }) }); const verifyJson = await verifyResp.json(); const v = normalize(verifyJson); if (!verifyResp.ok || !isValid(verifyJson)) throw new Error('VERIFY_INVALID'); - setStep('verify','passed',`verifier_status=${v.status} hash_matches=${String(v.hash_matches)} signature_valid=${String(v.signature_valid)}`); - validSummary.textContent = `VALID -verifier_status: ${v.status} -hash_matches: ${String(v.hash_matches)} -signature_valid: ${String(v.signature_valid)}`; + setStep('verify','passed',`original receipt ${v.status}`,`hash_matches=${valueOrDash(v.hash_matches)} signature_valid=${valueOrDash(v.signature_valid)}`); + validSummary.innerHTML = `
VALID
verifier_status: ${v.status}
hash_matches: ${valueOrDash(v.hash_matches)}
signature_valid: ${valueOrDash(v.signature_valid)}
`; - setStep('tamper','running','Mutating receipt.result.payload.message'); + setStep('tamper','running','modifying payload output text...','canonical payload mutated'); const tampered = JSON.parse(JSON.stringify(receipt)); if (!tampered.result) tampered.result = {}; if (!tampered.result.payload) tampered.result.payload = {}; tampered.result.payload.message = 'tampered homepage proof'; - setStep('tamper','passed','message="tampered homepage proof"'); + setStep('tamper','passed','payload tampered (same signer metadata retained)','tampered receipt prepared'); - setStep('reject','running','POST /verify with tampered receipt'); + setStep('reject','running','verifying tampered receipt...','expect INVALID result'); const rejectResp = await fetch(`${runtimeBase}/verify`, { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({ receipt: tampered }) }); const rejectJson = await rejectResp.json(); const t = normalize(rejectJson); const tamperRejected = !isValid(rejectJson); if (!rejectResp.ok || !tamperRejected) throw new Error('REJECT_EXPECTED'); - setStep('reject','failed',`tampered_status=${t.status} hash_matches=${String(t.hash_matches)} signature_valid=${String(t.signature_valid)}`); - invalidSummary.textContent = `INVALID -tampered_status: ${t.status} -hash_matches: ${String(t.hash_matches)} -signature_valid: ${String(t.signature_valid)}`; + setStep('reject','failed',`tampered receipt ${t.status}`,`hash_matches=${valueOrDash(t.hash_matches)} signature_valid=${valueOrDash(t.signature_valid)}`); + invalidSummary.innerHTML = `
INVALID
tampered_status: ${t.status}
hash_matches: ${valueOrDash(t.hash_matches)}
signature_valid: ${valueOrDash(t.signature_valid)}
`; raw.textContent = JSON.stringify({ sign_response: signJson, verify_response: verifyJson, tampered_verify_response: rejectJson }, null, 2); } catch (e) { err.style.display = 'block';