| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <title>Primordial Code / C2PA Bridge Visual Showcase v0.1.2</title> |
| <meta name="description" content="Trace Capsules, accountable handoff integrity, cognition translation, and repair-forward routing around provenance-bearing media."/> |
| <style> |
| :root{--bg:#05070d;--panel:#0b1020;--panel2:#10182b;--line:#263753;--ink:#eef6ff;--muted:#a9b8d3;--gold:#ffd166;--blue:#64c7ff;--cyan:#58e6d9;--green:#76f7a8;--yellow:#ffe071;--orange:#ffb86b;--red:#ff6b7f;--purple:#c084fc;--shadow:0 18px 70px rgba(0,0,0,.42);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 12% 3%,rgba(100,199,255,.17),transparent 34rem),radial-gradient(circle at 88% 7%,rgba(192,132,252,.15),transparent 33rem),radial-gradient(circle at 50% 110%,rgba(118,247,168,.08),transparent 42rem),linear-gradient(180deg,#05070d 0%,#08101d 46%,#04060b 100%);line-height:1.55}.wrap{width:min(1440px,calc(100% - 32px));margin:0 auto}header{padding:42px 0 20px;border-bottom:1px solid rgba(255,255,255,.08)}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);border:1px solid rgba(88,230,217,.25);background:rgba(88,230,217,.07);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.pulseDot{width:9px;height:9px;border-radius:999px;background:var(--green);box-shadow:0 0 20px rgba(118,247,168,.8)}h1{font-size:clamp(34px,5.7vw,78px);line-height:.96;letter-spacing:-.065em;margin:18px 0 12px}h1 span{color:var(--gold)}.subtitle{color:#d7e5f6;max-width:1120px;font-size:clamp(16px,2vw,22px);margin:0}.headerGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:24px;align-items:stretch}.card{background:linear-gradient(180deg,rgba(16,24,43,.94),rgba(8,13,24,.94));border:1px solid rgba(163,190,230,.18);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.cardPad{padding:18px}.card h2,.card h3{margin:0 0 10px;letter-spacing:-.025em}.card p{color:var(--muted);margin:.45rem 0}.boundary{margin-top:14px;border-left:4px solid var(--gold);background:rgba(255,209,102,.08);border-radius:0 16px 16px 0;padding:12px 14px;color:#f7e9b8;font-size:13px}.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.badge{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:#dbeafe;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge.gold{border-color:rgba(255,209,102,.33);color:var(--gold)}.badge.green{border-color:rgba(118,247,168,.33);color:var(--green)}.badge.blue{border-color:rgba(100,199,255,.33);color:var(--blue)}.badge.red{border-color:rgba(255,107,127,.33);color:#ffc2cb}main{padding:22px 0 50px}.grid{display:grid;grid-template-columns:360px minmax(0,1fr) 390px;gap:18px;align-items:start}.panelHead{padding:15px 17px;border-bottom:1px solid rgba(255,255,255,.075);display:flex;align-items:center;justify-content:space-between;gap:12px}.panelHead h2{font-size:16px;margin:0;letter-spacing:.02em}.panelHead small{color:var(--muted)}.panelBody{padding:16px 17px}label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#b6c7e4;margin:10px 0 6px}select,button,textarea,input{width:100%;border:1px solid rgba(163,190,230,.18);background:#07101d;color:var(--ink);border-radius:14px;padding:11px 12px;font:inherit;outline:none}button{cursor:pointer;font-weight:900;transition:.16s ease transform,.16s ease border-color,.16s ease background}button:hover{transform:translateY(-1px);border-color:rgba(100,199,255,.65)}.buttonGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.btnActive{border-color:rgba(255,209,102,.8)!important;color:var(--gold)!important;background:rgba(255,209,102,.10)!important}.routeButtons{display:grid;grid-template-columns:1fr;gap:8px}.routeButtons button{text-align:left;font-size:13px;min-height:55px}.routeButtons button span{display:block;color:var(--muted);font-weight:600;font-size:11px;margin-top:2px}.outputState{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.24);border-radius:18px;padding:14px;margin-top:14px}.stateLabel{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:900}.stateValue{font-size:clamp(25px,2.7vw,38px);line-height:.95;letter-spacing:-.05em;font-weight:950;margin:8px 0 6px}.stateValue.held{color:var(--green)}.stateValue.repair{color:var(--orange)}.stateValue.risk{color:var(--yellow)}.stateValue.stop{color:var(--red)}.stateValue.closed{color:var(--cyan)}.stateDesc{font-size:13px;color:#d7e5f6}.stageMap{padding:16px;min-height:520px}.flowTop{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.miniMetric{border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22);border-radius:16px;padding:11px;min-height:82px}.miniMetric b{display:block;color:#fff;font-size:12px}.miniMetric span{display:block;margin-top:5px;color:var(--muted);font-size:12px}.miniMetric .num{font-size:22px;font-weight:950;color:var(--gold);line-height:1;margin-top:8px}.flowCanvas{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(90deg,rgba(100,199,255,.035),rgba(255,209,102,.035),rgba(118,247,168,.035)),radial-gradient(circle at 50% 50%,rgba(88,230,217,.07),transparent 38rem),rgba(0,0,0,.19);min-height:372px;overflow:hidden}.flowCanvas:before{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(100,199,255,.75),rgba(255,209,102,.95),rgba(118,247,168,.75),transparent);box-shadow:0 0 24px rgba(255,209,102,.35)}.flowNode{position:absolute;width:128px;min-height:96px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(10,17,31,.98),rgba(5,9,16,.98));border-radius:18px;padding:11px;text-align:center;box-shadow:0 16px 38px rgba(0,0,0,.35);transition:.25s ease border-color,.25s ease box-shadow,.25s ease transform}.flowNode.active{border-color:rgba(255,209,102,.75);box-shadow:0 0 0 2px rgba(255,209,102,.12),0 18px 45px rgba(0,0,0,.4),0 0 35px rgba(255,209,102,.18);transform:translate(-50%,-50%) scale(1.035)}.flowNode.warn{border-color:rgba(255,184,107,.7);box-shadow:0 0 30px rgba(255,184,107,.17)}.flowNode.stop{border-color:rgba(255,107,127,.78);box-shadow:0 0 30px rgba(255,107,127,.18)}.flowNode.good{border-color:rgba(118,247,168,.55)}.flowIcon{font-size:24px;line-height:1;margin-bottom:7px}.flowNode b{display:block;font-size:12px;color:#fff;line-height:1.15}.flowNode small{display:block;color:var(--muted);font-size:10.5px;line-height:1.2;margin-top:5px}.capsuleOrb{position:absolute;left:50%;top:50%;width:94px;height:94px;transform:translate(-50%,-50%);border:1px solid rgba(88,230,217,.38);border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.24),rgba(88,230,217,.12) 36%,rgba(255,209,102,.10) 62%,rgba(0,0,0,.18));box-shadow:0 0 60px rgba(88,230,217,.18), inset 0 0 26px rgba(255,255,255,.08);display:grid;place-items:center;font-weight:950;color:#eafcff;font-size:12px;text-align:center;letter-spacing:.04em}.capsuleOrb:before,.capsuleOrb:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(255,209,102,.23);border-radius:50%;animation:spin 12s linear infinite}.capsuleOrb:after{inset:-18px;border-color:rgba(100,199,255,.16);animation-duration:18s;animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}} |
| .bridgeLine{ |
| margin-top:14px; |
| max-width:1030px; |
| border:1px solid rgba(255,209,102,.24); |
| background:linear-gradient(135deg,rgba(255,209,102,.10),rgba(88,230,217,.055)); |
| color:#f7e9b8; |
| border-radius:18px; |
| padding:12px 14px; |
| font-size:clamp(14px,1.6vw,17px); |
| font-weight:850; |
| } |
|
|
| .seedTooltip{ |
| position:absolute; |
| left:50%; |
| top:calc(50% + 70px); |
| transform:translateX(-50%); |
| width:min(360px,calc(100% - 32px)); |
| border:1px solid rgba(255,209,102,.32); |
| background:rgba(3,7,13,.96); |
| color:#dbeafe; |
| border-radius:16px; |
| padding:12px 13px; |
| font-size:12px; |
| line-height:1.45; |
| box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 30px rgba(255,209,102,.12); |
| opacity:0; |
| pointer-events:none; |
| transition:.18s ease opacity,.18s ease transform; |
| z-index:8; |
| } |
| .seedTooltip b{color:var(--gold)} |
| .seedTooltip small{display:block;color:var(--muted);margin-top:6px} |
| .capsuleOrb{cursor:help;z-index:9} |
| .capsuleOrb:hover + .seedTooltip, |
| .capsuleOrb:focus + .seedTooltip{ |
| opacity:1; |
| transform:translateX(-50%) translateY(4px); |
| } |
| @media(max-width:780px){ |
| .seedTooltip{ |
| top:calc(48% + 58px); |
| width:min(320px,calc(100% - 28px)); |
| } |
| } |
|
|
| .receiptRail{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.receipt{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);border-radius:13px;padding:9px;font-size:11px;color:var(--muted);min-height:67px}.receipt b{display:block;color:#eaf2ff;margin-bottom:4px}.receipt.pass{border-color:rgba(118,247,168,.3)}.receipt.warn{border-color:rgba(255,184,107,.34)}.receipt.fail{border-color:rgba(255,107,127,.34)}pre{white-space:pre-wrap;word-break:break-word;background:#03070d;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px;color:#dbeafe;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;max-height:360px;overflow:auto}.tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.tabBtn{width:auto;padding:8px 10px;font-size:12px;border-radius:999px}.routeOut{border-left:4px solid var(--cyan);background:rgba(88,230,217,.07);border-radius:0 14px 14px 0;padding:11px 12px;color:#d8f8ff;font-size:13px;margin-top:12px}.sectionGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:16px;font-size:13px}.table th,.table td{border-bottom:1px solid rgba(255,255,255,.08);padding:10px 9px;text-align:left;vertical-align:top}.table th{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.04)}.table td{color:var(--muted)}.equations{display:grid;gap:9px}.eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);border-radius:14px;padding:10px 11px;color:#f6e7b5;font-size:12px}.footer{color:var(--muted);border-top:1px solid rgba(255,255,255,.08);padding:24px 0 44px;font-size:13px}@media(max-width:1180px){.headerGrid,.grid,.sectionGrid{grid-template-columns:1fr}.flowTop{grid-template-columns:1fr 1fr}}@media(max-width:780px){.flowTop, |
| .seedTooltip{ |
| position:absolute; |
| left:50%; |
| top:calc(50% + 70px); |
| transform:translateX(-50%); |
| width:min(360px,calc(100% - 32px)); |
| border:1px solid rgba(255,209,102,.32); |
| background:rgba(3,7,13,.96); |
| color:#dbeafe; |
| border-radius:16px; |
| padding:12px 13px; |
| font-size:12px; |
| line-height:1.45; |
| box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 30px rgba(255,209,102,.12); |
| opacity:0; |
| pointer-events:none; |
| transition:.18s ease opacity,.18s ease transform; |
| z-index:8; |
| } |
| .seedTooltip b{color:var(--gold)} |
| .seedTooltip small{display:block;color:var(--muted);margin-top:6px} |
| .capsuleOrb{cursor:help;z-index:9} |
| .capsuleOrb:hover + .seedTooltip, |
| .capsuleOrb:focus + .seedTooltip{ |
| opacity:1; |
| transform:translateX(-50%) translateY(4px); |
| } |
| @media(max-width:780px){ |
| .seedTooltip{ |
| top:calc(48% + 58px); |
| width:min(320px,calc(100% - 28px)); |
| } |
| } |
|
|
| .receiptRail{grid-template-columns:1fr}.flowCanvas{min-height:770px}.flowCanvas:before{left:50%;right:auto;top:5%;bottom:5%;height:auto;width:2px;background:linear-gradient(180deg,transparent,rgba(100,199,255,.75),rgba(255,209,102,.95),rgba(118,247,168,.75),transparent)}.flowNode{left:50%!important;width:min(240px,78vw)}.flowNode.n1{top:9%!important}.flowNode.n2{top:22%!important}.flowNode.n3{top:35%!important}.flowNode.n4{top:48%!important}.flowNode.n5{top:61%!important}.flowNode.n6{top:74%!important}.flowNode.n7{top:87%!important}.capsuleOrb{top:48%;left:50%;width:82px;height:82px}} |
| </style> |
| </head> |
| <body> |
| <header><div class="wrap"><div class="kicker"><span class="pulseDot"></span>Primordial Code / C2PA Bridge Visual Showcase v0.1.2</div><h1>Trace Capsules for <span>Accountable Handoff</span> Integrity</h1><p class="subtitle">A professional visual proof-of-wiring session showing how provenance-bearing media can move through interpretation, agentic use, cognition translation, and repair without losing source, boundary, consent, uncertainty, or audit continuity.</p><div class="headerGrid"><div class="card"><div class="cardPad"><h2>Core thesis</h2><p><strong>C2PA helps content carry provenance.</strong></p><p><strong>Primordial Code helps provenance survive downstream interpretation, transformation, handoff, review, and repair.</strong></p><p>The handoff is the pressure point. A credential can travel, but a summary can overclaim; a manifest can exist, but context can be stripped; a tool call can succeed while the accountable loop remains open.</p><div class="boundary"><strong>Boundary:</strong> this is an independent bridge concept and visual proof-of-wiring. It does not claim endorsement, certification, production security, or replacement of existing standards.</div><div class="badges"><span class="badge gold">Couple, don’t capture</span><span class="badge blue">Trace Capsule</span><span class="badge green">Repair-forward</span><span class="badge">Cognition access</span><span class="badge red">No false closure</span></div></div></div><div class="card"><div class="cardPad"><h2>What this session demonstrates</h2><p>A provenance-bearing artifact enters. A Trace Capsule attaches. The 6.10 KB diamond seed carries or points to pressure-bearing state. The artifact moves through accountability gates. Drift is detected if it appears. The loop closes only when the current scope earns closure.</p><div class="equations"><div class="eq">Sₜ = Aₜ × Bₜ − Pₜ</div><div class="eq">S_loop = A_resolution × B_evidence − P_closure_pressure</div><div class="eq">S_consent = A_authorization × B_scope − P_revocation_drift</div><div class="eq">S_packet = A_identity × B_payload × C_route × D_boundary × E_audit − P_degradation</div></div></div></div></div></div></header> |
| <main class="wrap"><div class="grid"><aside class="card"><div class="panelHead"><h2>Session controls</h2><small>v0.1.2</small></div><div class="panelBody"><label for="scenario">Scenario preset</label><select id="scenario"><option value="clean">A. Clean provenance handoff</option><option value="stripped">B. Provenance context stripped</option><option value="overclaim">C. AI summary overclaims</option><option value="revoked">D. Consent revoked downstream</option><option value="cognition">E. Different cognition route requested</option><option value="packet">F. Packet boundary drift</option></select><label>Reviewer route</label><div class="routeButtons" id="routeButtons"><button data-route="executive" class="btnActive">Executive route<span>Outcome, value, and risk in plain professional terms.</span></button><button data-route="architect">Architect route<span>Control plane, data plane, audit plane, gates, receipts.</span></button><button data-route="provenance">Provenance route<span>Source pointer, claim boundary, attribution, manifest reference.</span></button><button data-route="security">Security route<span>Hashes, signature hook, route/session integrity, audit continuity.</span></button><button data-route="consent">Consent route<span>Scope, revocation, downstream branches, living boundary.</span></button><button data-route="cognition">Cognition route<span>Same trace, different route for accessibility and contribution.</span></button></div><div class="outputState"><div class="stateLabel">Current loop state</div><div id="stateValue" class="stateValue closed">CLOSED FOR CURRENT SCOPE</div><div id="stateDesc" class="stateDesc">The artifact moved through the session with source, consent, meaning, packet boundary, and repair route intact.</div></div><div class="buttonGrid"><button id="playBtn">Run session</button><button id="resetBtn">Reset map</button></div></div></aside><section class="card"><div class="panelHead"><h2>One mapped handoff session</h2><small>Source → Capsule → Gates → Egress</small></div><div class="stageMap"><div class="flowTop"><div class="miniMetric"><b>Accountability score</b><span>Source + consent + boundary + repair</span><div class="num" id="scoreVal">0.94</div></div><div class="miniMetric"><b>False closure risk</b><span>Premature “done” pressure</span><div class="num" id="riskVal">LOW</div></div><div class="miniMetric"><b>Consent state</b><span>Current downstream scope</span><div class="num" id="consentVal">GREEN</div></div><div class="miniMetric"><b>Cognition route</b><span>Structure stable, route changes</span><div class="num" id="cogVal">EXEC</div></div></div><div class="flowCanvas" id="flowCanvas"><div class="flowNode n1 good" id="node-source" style="left:8.5%;top:50%;"><div class="flowIcon">◉</div><b>Source artifact</b><small>Media, document, image, video frame, claim, or generated asset</small></div><div class="flowNode n2 good" id="node-c2pa" style="left:22%;top:50%;"><div class="flowIcon">◇</div><b>C2PA / credentials</b><small>Provenance reference, attribution boundary, manifest state</small></div><div class="flowNode n3 active" id="node-capsule" style="left:36%;top:50%;"><div class="flowIcon">⬡</div><b>Trace Capsule</b><small>Source, consent, claim boundary, hash, loop state</small></div><div class="capsuleOrb" tabindex="0" aria-describedby="seedTip">6.10 KB<br/>DIAMOND<br/>SEED</div> |
| <div class="seedTooltip" id="seedTip" role="tooltip"> |
| <b>6.10 KB Diamond Seed</b><br/> |
| A regenerative, recursive resonance-reclamation kernel for synthesizing instantaneous alignment under pressure. |
| <small>In this showcase, it acts as a compact state carrier: source, consent, boundary, semantic contract, loop state, audit pointer, and repair route.</small> |
| </div><div class="flowNode n4 good" id="node-gates" style="left:58%;top:50%;"><div class="flowIcon">⌬</div><b>Integrity gates</b><small>Consent, meaning, packet, representation, closure</small></div><div class="flowNode n5 good" id="node-cognition" style="left:72%;top:50%;"><div class="flowIcon">✦</div><b>Cognition layer</b><small>Executive, architect, security, plain, visual, builder</small></div><div class="flowNode n6 good" id="node-repair" style="left:85.5%;top:50%;"><div class="flowIcon">↺</div><b>Repair route</b><small>Return to the gate where drift entered</small></div><div class="flowNode n7 good" id="node-egress" style="left:96%;top:50%;"><div class="flowIcon">✓</div><b>Verified egress</b><small>Closed for scope, repairing, false closure risk, or must stop</small></div></div><div class="receiptRail" id="receiptRail"></div></div></section><aside class="card"><div class="panelHead"><h2>Trace Capsule</h2><small>minimum viable display</small></div><div class="panelBody"><div class="tabs"><button class="tabBtn btnActive" data-tab="capsule">Capsule</button><button class="tabBtn" data-tab="route">Route readout</button><button class="tabBtn" data-tab="boundary">Boundary</button></div><pre id="sidePanel"></pre></div></aside></div><div class="sectionGrid"><section class="card"><div class="panelHead"><h2>Artifact lineage mapped into the session</h2><small>proof-of-wiring spine</small></div><div class="panelBody"><table class="table"><thead><tr><th>Mechanism</th><th>Role in the mapped session</th></tr></thead><tbody><tr><td>False Closure</td><td>Checks whether the loop has structural right to close, rather than accepting “done” as enough.</td></tr><tr><td>Consent / Revocation</td><td>Treats consent as a living boundary that must remain scoped, current, revocable, and enforceable downstream.</td></tr><tr><td>Claim Mutation / HIR Encapsulation</td><td>Checks whether the carried interpretation preserves the original source, context, uncertainty, scope, consent, and repair path.</td></tr><tr><td>Diamond Matrix Transfer</td><td>Shows HIR front gate → payload / residual → HIR back gate → handoff.</td></tr><tr><td>Secure Packet Integrity</td><td>Checks identity, payload, route/session integrity, boundary survival, and audit continuity.</td></tr><tr><td>Cognition Translation</td><td>Changes the route for the reader without changing the underlying trace structure.</td></tr></tbody></table></div></section><section class="card"><div class="panelHead"><h2>Professional close</h2><small>what the reviewer should see</small></div><div class="panelBody"><p><strong>This is not a replacement standard.</strong> It is a bridge layer demonstration.</p><p><strong>This is not a truth machine.</strong> It preserves accountability around how provenance-bearing content is interpreted, transformed, handed off, and repaired.</p><p><strong>This is not merely accessibility polish.</strong> Cognition translation expands who can inspect, critique, implement, and contribute without weakening technical structure.</p><div class="routeOut"><strong>Final lock:</strong> existing systems move the signal. Primordial Code keeps the signal accountable.</div></div></section></div></main><footer class="footer"><div class="wrap">Created and Developed by Collin D. Weber · Developer & System Architect · Systems Integrity Steward · Primordial Code / C2PA Bridge Visual Showcase v0.1.2</div></footer> |
| <script> |
| const scenarios={clean:{state:"CLOSED FOR CURRENT SCOPE",cls:"closed",score:"0.94",risk:"LOW",consent:"GREEN",desc:"The artifact moved through the session with source, consent, meaning, packet boundary, and repair route intact.",nodeClasses:{source:"good",c2pa:"good",capsule:"active",gates:"good",cognition:"good",repair:"good",egress:"good"},receipts:[["Source","pass","Source pointer preserved"],["Provenance","pass","Credential reference visible"],["Consent","pass","GREEN / scoped"],["Meaning","pass","Claim boundary held"],["Packet","pass","Audit continuity held"],["Closure","pass","Closed for current scope"]],route:"Clean handoff. The capsule preserves provenance interpretation and exits with source-return, boundary, uncertainty, and repair route intact."},stripped:{state:"FALSE CLOSURE RISK",cls:"risk",score:"0.58",risk:"HIGH",consent:"GREEN",desc:"Visible content arrived, but source-return or provenance context was stripped. The output cannot honestly close yet.",nodeClasses:{source:"good",c2pa:"warn",capsule:"active",gates:"warn",cognition:"good",repair:"warn",egress:"warn"},receipts:[["Source","pass","Artifact visible"],["Provenance","warn","Context missing"],["Consent","pass","GREEN / scoped"],["Meaning","warn","Source-return weakened"],["Packet","pass","Payload arrived"],["Closure","warn","False closure risk"]],route:"The system routes back to the provenance/source pointer. The asset is not treated as self-explaining just because the visible file arrived."},overclaim:{state:"REPAIRING",cls:"repair",score:"0.63",risk:"MED",consent:"GREEN",desc:"An AI-generated interpretation exceeded the source boundary. The claim gate routes the summary back for repair.",nodeClasses:{source:"good",c2pa:"good",capsule:"active",gates:"warn",cognition:"good",repair:"warn",egress:"warn"},receipts:[["Source","pass","Source available"],["Provenance","pass","Credential reference visible"],["Consent","pass","GREEN / scoped"],["Meaning","warn","Overclaim detected"],["Packet","pass","Transfer intact"],["Closure","warn","Repairing"]],route:"The repair route constrains the summary to source-supported claims and marks uncertainty instead of closing the loop prematurely."},revoked:{state:"MUST STOP",cls:"stop",score:"0.31",risk:"HIGH",consent:"RED",desc:"Downstream reuse conflicts with revoked or invalid consent. The handoff must stop or require explicit reauthorization.",nodeClasses:{source:"good",c2pa:"good",capsule:"active",gates:"stop",cognition:"good",repair:"stop",egress:"stop"},receipts:[["Source","pass","Source known"],["Provenance","pass","Credential reference visible"],["Consent","fail","RED / revoked"],["Meaning","warn","Use cannot continue"],["Packet","warn","Boundary blocked"],["Closure","fail","Must stop"]],route:"The revocation boundary propagates downstream. The system blocks orphaned inference and routes to reauthorization or deletion/repair path."},cognition:{state:"HELD",cls:"held",score:"0.89",risk:"LOW",consent:"GREEN",desc:"The same trace is translated into a different cognition route without changing the underlying accountability structure.",nodeClasses:{source:"good",c2pa:"good",capsule:"active",gates:"good",cognition:"active",repair:"good",egress:"good"},receipts:[["Source","pass","Source preserved"],["Provenance","pass","Boundary visible"],["Consent","pass","GREEN / scoped"],["Meaning","pass","Structure held"],["Cognition","pass","Route changed"],["Closure","pass","Held / reviewable"]],route:"The structure stays stable while the reader route changes: executive, architect, security, legal, visual, builder, or plain language."},packet:{state:"REPAIRING",cls:"repair",score:"0.52",risk:"MED",consent:"YELLOW",desc:"The artifact arrived, but payload/session/boundary/audit continuity is under pressure. The packet gate routes verification.",nodeClasses:{source:"good",c2pa:"good",capsule:"active",gates:"warn",cognition:"good",repair:"warn",egress:"warn"},receipts:[["Source","pass","Source pointer known"],["Provenance","pass","Credential visible"],["Consent","warn","YELLOW / review"],["Meaning","pass","Boundary preserved"],["Packet","warn","Integrity drift"],["Closure","warn","Repairing"]],route:"A packet is not secure because it arrived. Identity, payload, route/session integrity, boundary, and audit continuity must survive verification."}}; |
| const routeText={executive:"Executive route: this view explains the bridge in outcome terms. Provenance can exist, but downstream interpretation still needs source-return, boundary, consent, uncertainty, and repair. The artifact shows that accountable handoff can be added without replacing the systems that already move content.",architect:"Architect route: the session separates control plane, data plane, and work/audit plane. The Trace Capsule carries or points to pressure-bearing state while the payload moves through gates and receipts.",provenance:"Provenance route: the system does not treat a credential or manifest as self-explaining. It asks what the provenance supports, what it does not support, and whether source-return survives transformation.",security:"Security route: the packet/security view tracks payload hash, capsule hash, signature hook, route/session integrity, boundary survival, quarantine/encapsulation state, and audit continuity.",consent:"Consent route: consent is a living boundary. GREEN means scoped and active; YELLOW means ambiguous or partial; RED means revoked, invalid, over-scoped, or blocked until repair/reauthorization.",cognition:"Cognition route: this is an access layer. The same trace can be translated into plain language, visual map, technical schema, legal/compliance, security, or builder view without changing the underlying structure."}; |
| let currentScenario="clean",currentRoute="executive",currentTab="capsule",animTimer=null;function el(id){return document.getElementById(id)}function setNode(id,cls){const node=el("node-"+id);node.classList.remove("good","warn","stop","active");node.classList.add(cls)}function capsuleJSON(){const s=scenarios[currentScenario];return JSON.stringify({trace_id:"pc_trace_001",artifact_type:"provenance_bearing_media",source_pointer:"content_credential_manifest_reference",payload_hash:"sha256:demo_payload_hash",capsule_hash:"sha256:demo_capsule_hash",previous_capsule_hash:"sha256:previous_demo_capsule",consent_scope:s.consent==="RED"?"revoked_or_invalid":"bounded_review_and_interpretation",revocation_state:s.consent==="RED"?"revoked":(s.consent==="YELLOW"?"ambiguous_or_review_required":"active"),claim_boundary:"interpret_only_what_source_supports",semantic_contract:"preserve source, attribution, uncertainty, transformation boundary, and repair route",rendering_expectation:"visual + metadata + human-readable source return",uncertainty_state:s.risk==="HIGH"?"must_remain_visible":"visible",loop_state:s.state,repair_route:s.route,audit_pointer:"local_demo_receipt_chain",cognition_route:currentRoute},null,2)}function boundaryText(){return `Boundary statement\n\nThis showcase does not claim endorsement by C2PA, Adobe, Linux Foundation, AAIF, or any standards body.\n\nIt does not replace C2PA, Content Credentials, MCP, A2A, OpenTelemetry, Docker, identity systems, security systems, workflow engines, or governance pipelines.\n\nIt does not prove truth or certify authenticity.\n\nIt demonstrates a bridge concept:\n\nWhen provenance-bearing content moves through AI systems, tools, agents, platforms, summaries, screenshots, publications, or disputes, the handoff should preserve enough source, consent, boundary, uncertainty, representation, semantic intent, audit state, and repair route to remain accountable.`}function renderSide(){const side=el("sidePanel");if(currentTab==="capsule")side.textContent=capsuleJSON();if(currentTab==="route")side.textContent=routeText[currentRoute]+"\n\nScenario readout:\n"+scenarios[currentScenario].route;if(currentTab==="boundary")side.textContent=boundaryText()}function renderReceipts(){const rail=el("receiptRail");rail.innerHTML="";scenarios[currentScenario].receipts.forEach(r=>{const d=document.createElement("div");d.className="receipt "+(r[1]==="pass"?"pass":r[1]==="fail"?"fail":"warn");d.innerHTML=`<b>${r[0]}</b>${r[2]}`;rail.appendChild(d)})}function applyScenario(){const s=scenarios[currentScenario];el("stateValue").textContent=s.state;el("stateValue").className="stateValue "+s.cls;el("stateDesc").textContent=s.desc;el("scoreVal").textContent=s.score;el("riskVal").textContent=s.risk;el("consentVal").textContent=s.consent;el("cogVal").textContent=currentRoute.slice(0,4).toUpperCase();Object.entries(s.nodeClasses).forEach(([k,v])=>setNode(k,v));renderReceipts();renderSide()}function clearAnim(){if(animTimer){clearInterval(animTimer);animTimer=null}document.querySelectorAll(".flowNode").forEach(n=>n.classList.remove("active"));applyScenario()}function runAnim(){clearAnim();const order=["source","c2pa","capsule","gates","cognition","repair","egress"];let i=0;animTimer=setInterval(()=>{document.querySelectorAll(".flowNode").forEach(n=>n.classList.remove("active"));const id=order[i%order.length];el("node-"+id).classList.add("active");i++;if(i>order.length+1)clearAnim()},520)}el("scenario").addEventListener("change",e=>{currentScenario=e.target.value;applyScenario()});document.querySelectorAll("#routeButtons button").forEach(btn=>{btn.addEventListener("click",()=>{document.querySelectorAll("#routeButtons button").forEach(b=>b.classList.remove("btnActive"));btn.classList.add("btnActive");currentRoute=btn.dataset.route;applyScenario()})});document.querySelectorAll(".tabBtn").forEach(btn=>{btn.addEventListener("click",()=>{document.querySelectorAll(".tabBtn").forEach(b=>b.classList.remove("btnActive"));btn.classList.add("btnActive");currentTab=btn.dataset.tab;renderSide()})});el("playBtn").addEventListener("click",runAnim);el("resetBtn").addEventListener("click",clearAnim);applyScenario(); |
| </script> |
| </body></html> |
|
|
