index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="See the difference between API access and exact delegated authority after classifier.dev routes an agent action." />
    <title>Confidence routes. Authority decides.</title>
    <link rel="canonical" href="https://labs.ratifyprotocol.com/classifier-dev/" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Ratify Labs" />
    <meta property="og:title" content="classifier.dev × Ratify — Confidence routes. Authority decides." />
    <meta property="og:description" content="Run classifier.dev's proposed action through ordinary tenant access and a Ratify receiver that verifies the exact signed authority before the CRM handler runs." />
    <meta property="og:url" content="https://labs.ratifyprotocol.com/classifier-dev/" />
    <meta property="og:image" content="https://labs.ratifyprotocol.com/og/classifier-dev.jpg" />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="640" />
    <meta property="og:image:alt" content="classifier.dev and Ratify compare semantic classification with exact delegated authority." />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="classifier.dev × Ratify — Confidence routes. Authority decides." />
    <meta name="twitter:description" content="Run classifier.dev's proposed action through ordinary tenant access and a Ratify receiver that verifies the exact signed authority before the CRM handler runs." />
    <meta name="twitter:image" content="https://labs.ratifyprotocol.com/og/classifier-dev.jpg" />
    <meta name="twitter:image:alt" content="classifier.dev and Ratify compare semantic classification with exact delegated authority." />
    <link rel="icon" href="./ratify-logo.png" type="image/png" />
    <link rel="stylesheet" href="./web/style.css" />
  </head>
  <body>
    <main>
      <header class="topbar">
        <a class="brand" href="https://labs.ratifyprotocol.com/" aria-label="Ratify Labs home">
          <img src="./ratify-logo.png" alt="" />
          <span>RATIFY <b>LABS</b></span>
        </a>
        <nav aria-label="Primary navigation">
          <a href="https://labs.ratifyprotocol.com/">Labs home ↗</a>
          <a href="https://github.com/identities-ai/ratify-classifier-reference">Source ↗</a>
          <a class="partner-link" href="https://classifier.dev" target="_blank" rel="noreferrer">classifier.dev ↗</a>
        </nav>
      </header>

      <section class="hero">
        <div class="eyebrow"><span></span> OPEN REFERENCE · HOSTED LAB</div>
        <h1>Confidence routes.<br /><em>Authority decides.</em></h1>
        <div><p class="thesis">classifier.dev helps an agent decide what a request means. Ratify verifies what this exact call is allowed to do.</p><p class="lede">The classifier proposes an action. The receiver checks the signed customer, operation, path, expiry, and one-time use before the CRM handler runs.</p></div>
      </section>

      <section class="workbench" aria-labelledby="workbench-title">
        <div class="workbench-head">
          <div class="scenario-title"><span class="step">01</span><div><h2 id="workbench-title">Choose a case to test</h2><p class="scenario-instruction">Select one option, then run it through both receivers.</p></div></div>
          <p class="scenario-explanation" id="scenario-explanation">Classification is correct, but the downstream resolver picks the wrong Anderson account. Tenant access cannot see that the mandate names customer 482.</p>
        </div>
        <div class="scenarios" role="tablist" aria-label="Demo scenarios">
          <span class="scenario-marker" aria-hidden="true"></span>
          <button role="tab" aria-selected="false" data-scenario="authorized">Exact mandate</button>
          <button role="tab" aria-selected="true" data-scenario="wrong_customer">Wrong account</button>
          <button role="tab" aria-selected="false" data-scenario="wrong_operation">Different operation</button>
          <button role="tab" aria-selected="false" data-scenario="replay">Copied request</button>
          <button role="tab" aria-selected="false" data-scenario="revoked">Authority revoked</button>
        </div>

        <div class="pregrant"><span class="micro">Issued before classification</span><strong>Principal → agent</strong><code>data:write · Acme / customer 482 / billing-address · 10 min · receiver single-use</code></div>

        <div class="route-strip">
          <div class="ticket">
            <span class="micro">Support ticket</span>
          <p id="ticket">Update the billing address on the Anderson account to 16 Market Street.</p>
          </div>
          <div class="arrow" aria-hidden="true">→</div>
          <div class="classification">
            <span class="micro">classifier.dev</span>
            <strong id="class-label">Awaiting classification</strong>
            <span id="confidence">Live result appears here</span>
          </div>
          <div class="arrow" aria-hidden="true">→</div>
          <div class="proposal">
            <span class="micro">Proposed call</span>
            <code id="proposal">Waiting for live classifier…</code>
          </div>
        </div>

        <button class="run" id="run" aria-label="Run the selected case through both receivers"><span class="run-label" id="run-label"><b>Run selected case</b><small>Click to classify and compare both receivers</small></span><span aria-hidden="true">↗</span></button>

        <div class="lane-grid" aria-live="polite">
          <article class="lane access-lane">
            <div class="lane-title"><span class="lane-number">A</span><div><span class="micro">Common control</span><h3>Tenant access</h3></div></div>
            <p>Authenticated, tenant-scoped, object-checked.</p>
            <div class="verdict waiting" id="access-verdict"><span>READY</span><strong>Not run</strong></div>
            <ul class="checks" id="access-checks"><li><i></i>Awaiting receiver checks</li></ul>
            <div class="counter">Handler executions <strong id="access-count">0</strong></div>
          </article>

          <article class="lane authority-lane">
            <div class="lane-title"><span class="lane-number">B</span><div><span class="micro">Ratify receiver</span><h3>Exact authority</h3></div></div>
            <p>Everything in A, plus principal-signed intent.</p>
            <div class="verdict waiting" id="authority-verdict"><span>READY</span><strong>Not run</strong></div>
            <ul class="checks" id="authority-checks"><li><i></i>Awaiting proof verification</li></ul>
            <div class="counter">Handler executions <strong id="authority-count">0</strong></div>
          </article>
        </div>
        <p class="error" id="error" role="alert"></p>
      </section>

      <section class="explainer" aria-label="What each project contributes">
        <div class="explainer-card classifier-card"><span class="step">A</span><div><span class="micro">classifier.dev</span><h2>Semantic routing</h2><p>Zero-shot classification over plain HTTP: text in, a label and calibrated confidence out. It helps an agent decide what a request means.</p><a href="https://classifier.dev" target="_blank" rel="noreferrer">See classifier.dev ↗</a></div></div>
        <div class="flow-plus" aria-hidden="true">+</div>
        <div class="explainer-card ratify-card"><span class="step">B</span><div><span class="micro">Ratify Protocol</span><h2>Delegated authority</h2><p>A portable proof that a recognized principal authorized this agent for this bounded action, checked by the receiver before the side effect.</p><a href="https://ratifyprotocol.com/?intent=proof#partners" target="_blank" rel="noreferrer">Register interest in Ratify Verify ↗</a></div></div>
      </section>

      <section class="mandate" aria-labelledby="mandate-title">
        <div><span class="step">02</span><h2 id="mandate-title">The fact an API key cannot carry</h2></div>
        <p class="mandate-sentence">This principal authorized <mark>one agent</mark> to perform <mark>writes</mark> on <mark>customer 482</mark> for a short window. The receiver binds and accepts <mark>this call once</mark>.</p>
        <div class="scope-line">
          <span>Principal</span><b>signed</b><span>Agent</span><b>data:write</b><span>Acme / 482 / billing-address</span><b>10 min</b><span>single use</span>
        </div>
      </section>

      <section class="boundary">
        <div class="boundary-copy"><span class="step">03</span><h2>Classification proposes.<br />The receiver verifies.</h2><p>Ratify does not prove that the classifier is correct. It gives the receiving system a cryptographic basis to allow or stop the action the classifier caused.</p></div>
        <div class="boundary-flow" role="img" aria-label="A support ticket is classified by classifier.dev, turned into a proposed agent call, verified by Ratify at the receiver, and allowed to reach the CRM handler only when authorized">
          <div class="boundary-node"><small>01 · INPUT</small><strong>Support ticket</strong><span>What the customer asks for</span></div>
          <i>→</i>
          <div class="boundary-node classifier-node"><small>02 · CLASSIFY</small><strong>classifier.dev</strong><span>Labels what it means</span></div>
          <i>→</i>
          <div class="boundary-node"><small>03 · PROPOSE</small><strong>Agent call</strong><span>Typed operation and resource</span></div>
          <i class="gate">◆</i>
          <div class="boundary-node protected"><small>04 · VERIFY</small><strong>Ratify receiver</strong><span>Checks authority before action</span></div>
          <i>→</i>
          <div class="boundary-node"><small>05 · EFFECT</small><strong>CRM handler</strong><span>Runs only on allow</span></div>
        </div>
      </section>

      <footer><p>Open-source reference. Fixed demo identities are public and must never be used in production.</p><a href="https://github.com/identities-ai/ratify-protocol" target="_blank" rel="noreferrer">Protocol ↗</a></footer>
    </main>
    <script type="module" src="/web/main.ts"></script>
  </body>
</html>