README / index.html
masoudmarandi's picture
org card: full landing + animated lifecycle stepper
d9afa74 verified
Raw
History Blame Contribute Delete
15.9 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>KYE Protocol™ — Know Your Entity™ · runtime authority for delegated AI</title>
<meta name="description" content="KYE Protocol™ makes who/what acted, on whose authority, with what continuity of meaning, observable, governable, revocable and replayable across humans, AI agents, tools, workflows, APIs and autonomous services." />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%231a8754'/%3E%3Cpath d='M14 14 L14 50 M14 32 L34 14 M14 32 L34 50 M40 14 L52 50 M52 14 L40 50' stroke='white' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E" />
<style>
:root{
--bg:#0b0f1c; --paper:#0f1424; --paper-2:#161b30; --line:rgba(255,255,255,0.10);
--text:#eef1f9; --text-muted:#a8b0cc; --accent:#a78bfa; --accent-2:#7c3aed; --green:#1a8754; --green-bg:rgba(26,135,84,0.18);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header.hero{padding:72px 0 36px;border-bottom:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(167,139,250,0.12);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1{font-size:clamp(36px,5vw,56px);line-height:1.05;margin:18px 0 10px;letter-spacing:-0.025em;font-weight:800}
h1 .accent{background:linear-gradient(120deg,#a78bfa 0%,#7c3aed 50%,#06b6d4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{color:var(--text-muted);font-size:17px;line-height:1.55;max-width:780px;margin:14px 0}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;border:1px solid var(--line);color:var(--text);background:var(--paper)}
.btn-primary{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-primary:hover{background:var(--accent)}
.btn:hover{border-color:var(--accent);text-decoration:none}
section{padding:48px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;margin:0 0 8px;letter-spacing:-0.02em}
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.card{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.card strong{display:block;font-size:14px;margin-bottom:4px}
.card span{color:var(--text-muted);font-size:13px;line-height:1.5}
.lc-card{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.lc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lc-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);margin-bottom:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;transition:border-color .25s,background .25s}
.lc-row.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.lc-row.is-done .lc-mark{background:var(--green);color:#fff}
.lc-row.is-pending .lc-mark{background:var(--paper);color:var(--text-muted);font-weight:700}
.lc-mark{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);color:var(--text-muted);font-size:13px;flex-shrink:0;transition:background .35s,color .35s,transform .35s}
.lc-row.is-done .lc-mark{transform:scale(1.05)}
.lc-state{padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.06);color:var(--text)}
.lc-arrow{color:var(--text-muted)}
.lc-target{padding:3px 9px;border-radius:5px;background:rgba(167,139,250,0.18);color:var(--accent)}
.lc-meta{margin-left:auto;color:var(--text-muted);font-size:11px;font-family:system-ui,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.footer{padding:28px 0;border-top:1px solid var(--line);color:var(--text-muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.footer-social{display:inline-flex;gap:8px}
.footer-social a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted)}
.footer-social a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.quote{margin:18px 0;padding:14px 18px;border-left:3px solid var(--accent);font-style:italic;color:var(--text-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.split > div{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.split h3{margin:0 0 10px;font-size:15px}
.split ul{margin:0;padding-left:18px;line-height:1.7}
.split li{font-size:13.5px;color:var(--text-muted)}
.badges{display:inline-flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.badge{padding:5px 10px;border-radius:6px;background:var(--paper-2);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-muted);border:1px solid var(--line)}
</style>
</head>
<body>
<div class="wrap">
<header class="hero">
<span class="pill"><span class="dot"></span> KYE Protocol™ · v1.1 · Apache-2.0 contracts</span>
<h1>Know Your Entity™ —<br/>runtime authority for <span class="accent">delegated AI</span>.</h1>
<p class="lede">KYE Protocol™ makes <strong>who/what acted</strong>, on whose authority, with what continuity of meaning, observable, governable, revocable and replayable across humans, AI agents, tools, workflows, APIs and autonomous services.</p>
<p class="lede"><em>Most systems prove what happened. KYE also asks whether the meaning survived.</em></p>
<div class="cta">
<a class="btn btn-primary" href="https://huggingface.co/spaces/KYE-Protocol/meaning-continuity-lab">Open Meaning Continuity Lab™ →</a>
<a class="btn" href="https://kyeprotocol.com">kyeprotocol.com</a>
<a class="btn" href="https://github.com/KYE-Protocol">GitHub</a>
</div>
<div class="badges">
<span class="badge">115 schemas</span>
<span class="badge">129 examples</span>
<span class="badge">58 profiles</span>
<span class="badge">41 conformance fixtures</span>
<span class="badge">307 control mappings</span>
<span class="badge">14 patent families · 42 drafts</span>
</div>
</header>
<section>
<span class="eyebrow">State drives runtime</span>
<h2>One protocol, eight engines, every action signed.</h2>
<p class="lede">Every entity in KYE™ has a state. State drives what's allowed at runtime. Watch a vendor onboarding move through its lifecycle:</p>
<div class="lc-card">
<div class="lc-eyebrow">Vendor lifecycle — example</div>
<div id="lc-steps"></div>
</div>
</section>
<section>
<span class="eyebrow">Open contracts (Apache-2.0)</span>
<h2>The contracts are open. The engines are paid.</h2>
<table class="table">
<thead><tr><th>Hugging Face artifact</th><th>What</th><th>License</th></tr></thead>
<tbody>
<tr><td><a href="https://huggingface.co/spaces/KYE-Protocol/meaning-continuity-lab">meaning-continuity-lab</a></td><td>Interactive demo: 5 scenarios × 8 continuity dimensions → meaning-continuity score, drift reason codes, signed-style decision JSON</td><td>Apache-2.0</td></tr>
<tr><td>schemas <em>(coming)</em></td><td>All KYE™ JSON Schemas (Core, Continuity, Discoverability, Ontology, Operating Model, Assurance Card, Formal Rules, Action Admissibility, Meaning Continuity)</td><td>Apache-2.0</td></tr>
<tr><td>reason-codes <em>(coming)</em></td><td>Canonical reason-code dictionary across decisions, drift events, obligations</td><td>Apache-2.0</td></tr>
<tr><td>examples <em>(coming)</em></td><td>Validated example payloads for every schema</td><td>Apache-2.0</td></tr>
<tr><td>conformance-fixtures <em>(coming)</em></td><td>Conformance test vectors used by the runner</td><td>Apache-2.0</td></tr>
</tbody>
</table>
<div class="split">
<div>
<h3>Open under Apache-2.0</h3>
<ul>
<li>All v1 schemas + JSON Schema 2020-12 contracts</li>
<li>Reason-code dictionary + drift-type taxonomy</li>
<li>Webhook event names</li>
<li>Sample fixtures, examples, conformance test vectors</li>
<li>SDKs: TypeScript / Python / Go</li>
<li>Reference Gateway (correctness-first)</li>
</ul>
</div>
<div>
<h3>Paid runtime layer (proprietary)</h3>
<ul>
<li>KYE Runtime Gateway™ (production)</li>
<li>KYE Decision / Continuity / Discovery / Ontology Engines™</li>
<li>KYE Rights &amp; Obligations Engine™ + Admissibility Engine™</li>
<li>KYE Meaning Continuity Engine™ + Drift Monitor™</li>
<li>KYE Reconfirmation Flow™</li>
<li>Sector packs · BYOC / on-prem · 24/7 SLA</li>
</ul>
</div>
</div>
</section>
<section>
<span class="eyebrow">Why "continuity of meaning"</span>
<h2>Provenance is not continuity.</h2>
<p class="lede">In agentic systems, an action's authorised meaning can <strong>drift</strong> before execution. Memory becomes stale, context changes, incentives conflict, intent gets reinterpreted across handoffs.</p>
<p class="lede">KYE Meaning Continuity™ checks whether <strong>original intent, constraints, context, memory, incentives, timing and state</strong> remain aligned across handoffs <em>before</em> the action is admitted, authorised, committed and evidenced.</p>
<blockquote class="quote">Attribution proves who acted. Meaning Continuity™ checks whether the action still means what it was supposed to mean.</blockquote>
<div class="cta">
<a class="btn btn-primary" href="https://huggingface.co/spaces/KYE-Protocol/meaning-continuity-lab">Try the Lab → pick a scenario, change drift signals, watch the score</a>
</div>
</section>
<footer class="footer">
<div>© <span id="yr"></span> KYE Protocol™. All trademarks are property of the KYE Protocol™ project. Apache-2.0 contracts.</div>
<div class="footer-social">
<a href="https://github.com/KYE-Protocol" title="GitHub" aria-label="GitHub">
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18.91-.25 1.89-.38 2.86-.38.97 0 1.95.13 2.86.38 2.19-1.49 3.15-1.18 3.15-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.26 5.68.41.36.78 1.06.78 2.13 0 1.54-.01 2.78-.01 3.16 0 .31.21.67.79.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>
</a>
<a href="https://x.com/kyeprotocol" title="X" aria-label="X">
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M18.244 2H21.5l-7.5 8.57L23 22h-6.84l-5.36-7.01L4.6 22H1.34l8.02-9.16L1 2h7.01l4.84 6.4L18.244 2zm-1.2 18h1.81L7.05 4H5.13l11.91 16z"/></svg>
</a>
<a href="https://www.linkedin.com/company/kye-protocol" title="LinkedIn" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43A2.06 2.06 0 113.28 5.37a2.06 2.06 0 012.06 2.06zm-1.78 13.02h3.56V9H3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.21 0 22.23 0z"/></svg>
</a>
<a href="https://kyeprotocol.com" title="kyeprotocol.com" aria-label="kyeprotocol.com">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</a>
</div>
</footer>
</div>
<script>
document.getElementById('yr').textContent = new Date().getFullYear();
// Vendor lifecycle auto-stepper — adopted from kyeprotocol.com legacy
// landing. Walks through canonical vendor onboarding states, marking
// each green every 900ms. Loops; pauses on hover.
const STEPS = [
{ from: 'submitted', to: 'under_review', note: '' },
{ from: 'under_review', to: 'approved', note: '' },
{ from: 'approved', to: 'conditionally_approved', note: '' },
{ from: 'conditionally_approved', to: 'active', note: '' },
{ from: 'active', to: 'expired', note: 'ISO renewal due' },
{ from: 'expired', to: 'suspended', note: '30-day grace ended' },
{ from: 'suspended', to: 'offboarded', note: 'cascade complete' },
];
const host = document.getElementById('lc-steps');
STEPS.forEach((s, i) => {
const row = document.createElement('div');
row.className = 'lc-row is-pending';
row.dataset.idx = i;
row.innerHTML = `
<span class="lc-mark">${i + 1}</span>
<span class="lc-state">${s.from}</span>
<span class="lc-arrow">→</span>
<span class="lc-target">${s.to}</span>
${s.note ? `<span class="lc-meta">${s.note}</span>` : ''}
`;
host.appendChild(row);
});
let cursor = 0;
let paused = false;
const interval = 900;
function tick() {
if (paused) return;
const rows = host.querySelectorAll('.lc-row');
if (cursor >= rows.length) {
// Reset for next loop
rows.forEach(r => { r.classList.remove('is-done', 'is-active'); r.classList.add('is-pending'); });
cursor = 0;
return;
}
rows.forEach((r, i) => {
r.classList.remove('is-active');
if (i < cursor) {
r.classList.add('is-done');
r.classList.remove('is-pending');
const m = r.querySelector('.lc-mark');
m.textContent = '✓';
} else if (i === cursor) {
r.classList.add('is-active');
}
});
cursor++;
}
// First step animates immediately
setTimeout(tick, 250);
setInterval(tick, interval);
host.addEventListener('mouseenter', () => paused = true);
host.addEventListener('mouseleave', () => paused = false);
</script>
</body>
</html>