/* global React, ReactDOM, Diagrams */

const { useState } = React;
const { LogicalArchitecture, StandardReviewPath, FailureAnalysisLoop } = Diagrams;

// ============================================================
// Submission — Project Immunity (polished, PortSwigger brand)
// ============================================================

function Bullets({ items }) {
  return (
    <ul className="bullets">
      {items.map((b, i) => <li key={i} dangerouslySetInnerHTML={{ __html: b }} />)}
    </ul>
  );
}

function App() {
  return (
    <>
      <header className="brandbar">
        <div className="left">
          <div className="brand-mark">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z" />
            </svg>
          </div>
          <div className="brand-title">
            Project Immunity
            <span className="sub">Technical submission</span>
          </div>
        </div>
        <div className="right">
          <span className="doc-tag">v1.0 · Draft</span>
        </div>
      </header>

      <main className="doc">

        {/* ============ HERO ============ */}
        <section className="hero">
          <div className="crumb">Technical proposal · PortSwigger</div>
          <h1>Contract similarity &amp; risk orchestration.</h1>
          <p className="lede">
            An AI-assisted triage layer that treats commercial contracts like
            version-controlled code — extracts them, compares them to precedent,
            and routes only the unusual or risky items to human review. The goal
            is to remove most of the manual load from boilerplate-heavy work
            while keeping legal in control of exceptions and high-risk cases.
          </p>
          <div className="hero-meta">
            <div><div className="k">Submitted by</div><div className="v">Tech submission</div></div>
            <div><div className="k">Audience</div><div className="v">Legal · Eng · Security</div></div>
            <div><div className="k">Status</div><div className="v">Draft proposal</div></div>
            <div><div className="k">Scope</div><div className="v">Standard commercial paper</div></div>
          </div>
        </section>

        {/* ============ 1. PROBLEM ============ */}
        <section id="problem">
          <div className="section-head">
            <div className="section-num">01 / Problem</div>
            <h2 className="section">Most legal work isn't novel work.</h2>
            <p className="deck">
              Small in-house legal teams spend most of their time reading the
              same kinds of contracts — mutual NDAs, small order forms, standard
              commercial paper. Most of this material is repetitive, but each
              document still requires a full human read.
            </p>
          </div>

          <div className="grid-2">
            <div className="card">
              <h3>The useful question</h3>
              <p className="mt-2">
                Not <em>"can AI replace legal judgment?"</em> — but
                <em> "can AI reliably identify what is already standard, what is
                genuinely different, and what needs attention now?"</em>
              </p>
              <p>That framing changes the whole design. We're not building a
              drafter or a redline assistant. We're building a triage layer.</p>
            </div>
            <div className="card">
              <h3>Where the queue pressure comes from</h3>
              <Bullets items={[
                "<strong>End of month / end of quarter</strong> — predictable spikes the team can't staff for.",
                "<strong>Repeat counterparties</strong> sending near-identical paper that still gets re-reviewed end-to-end.",
                "<strong>Vendor-side redlines</strong> that touch one clause but trigger a full re-read.",
                "<strong>Boilerplate fatigue</strong> — senior reviewers spend judgment on low-stakes work.",
              ]} />
            </div>
          </div>
        </section>

        {/* ============ 2. CORE IDEA ============ */}
        <section id="idea">
          <div className="section-head">
            <div className="section-num">02 / Core idea</div>
            <h2 className="section">Baseline-to-delta.</h2>
            <p className="deck">
              Treat each contract as a delta from known-good precedent. If the
              delta is small, accelerate it. If the delta is meaningful, route
              it. If the delta is novel, escalate it.
            </p>
          </div>

          <div className="card featured">
            <Bullets items={[
              "<strong>Extract</strong> the document into clean Markdown — diff-able, version-controllable.",
              "<strong>Compare</strong> clause-by-clause to a library of accepted boilerplate and historical exceptions.",
              "<strong>Compare again</strong> to a library of rejected or problematic language.",
              "<strong>Review</strong> ambiguous cases with multiple LLMs running independently.",
              "<strong>Compare outputs</strong> — agreement increases confidence, disagreement is an escalation signal.",
              "<strong>Route</strong> only unusual, high-risk, or conflicting cases to a human.",
            ]} />
          </div>

          <div className="callout">
            <p><strong>If it looks like something already accepted</strong>, it should move quickly. <strong>If it deviates too much</strong>, it should be flagged. The model never decides hard-fail criteria — those stay with legal, as deterministic rules.</p>
          </div>
        </section>

        {/* ============ 3. PIPELINE ============ */}
        <section id="pipeline">
          <div className="section-head">
            <div className="section-num">03 / Pipeline</div>
            <h2 className="section">Six stages, end to end.</h2>
            <p className="deck">Each stage is replaceable in isolation. The system is a chain of small, auditable components, not a monolith.</p>
          </div>

          <div className="pipeline">
            <div className="stage"><div className="n">01</div><div className="t">Extract</div><div className="d">PDF / DOCX → Markdown. Preserves clause hierarchy, dates, tables.</div></div>
            <div className="stage"><div className="n">02</div><div className="t">Similarity</div><div className="d">Clause-level comparison against known-good and known-bad libraries.</div></div>
            <div className="stage"><div className="n">03</div><div className="t">Ensemble</div><div className="d">Three LLM personas — Stickler, Commercial, Adversary — review in parallel.</div></div>
            <div className="stage"><div className="n">04</div><div className="t">Policy</div><div className="d">Deterministic CI checks for forbidden phrases, jurisdictions, liability triggers.</div></div>
            <div className="stage"><div className="n">05</div><div className="t">Failure loop</div><div className="d">Failed clauses compared to historical rejections and accepted exceptions.</div></div>
            <div className="stage"><div className="n">06</div><div className="t">Feedback</div><div className="d">Knowledge-graph sync, plus 5% stochastic QA on auto-approvals.</div></div>
          </div>
        </section>

        {/* ============ 4. OPERATIONAL LOGIC ============ */}
        <section id="bands">
          <div className="section-head">
            <div className="section-num">04 / Operational logic</div>
            <h2 className="section">Similarity bands &amp; routing.</h2>
            <p className="deck">The single most important decision the system makes is which band a document lands in. Everything else cascades from that.</p>
          </div>
          <div className="bands">
            <table>
              <thead>
                <tr><th>Similarity</th><th>Status</th><th>Action</th></tr>
              </thead>
              <tbody>
                <tr className="green">
                  <td>90% – 100%</td>
                  <td className="status">Standard</td>
                  <td>Bypass LLM review entirely. Route directly to deterministic rules engine.</td>
                </tr>
                <tr className="amber">
                  <td>50% – 89%</td>
                  <td className="status">Hybrid</td>
                  <td>Route to 3-model ensemble. Consensus → rules; discrepancy → human.</td>
                </tr>
                <tr className="red">
                  <td>Below 50%</td>
                  <td className="status">Novel</td>
                  <td>Flag as high complexity. Route directly to manual review queue.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        {/* ============ 5. LOGICAL ARCHITECTURE ============ */}
        <section id="arch">
          <div className="section-head">
            <div className="section-num">05 / Logical architecture</div>
            <h2 className="section">The system on one screen.</h2>
            <p className="deck">Click any node for an explanation of what it does and why it sits where it does.</p>
          </div>
          <LogicalArchitecture />
        </section>

        {/* ============ 6. RISK FORMULA ============ */}
        <section id="risk">
          <div className="section-head">
            <div className="section-num">06 / Risk scoring</div>
            <h2 className="section">A consistent way to order the queue.</h2>
            <p className="deck">Per-clause deviation × commercial value × clause criticality. The formula doesn't need to be precise — it needs to order risk consistently and explainably.</p>
          </div>

          <div className="formula-stage">
            <div className="formula">
              <em>R</em> &nbsp;=&nbsp; Σ&thinsp;( <em>D</em><sub>i</sub> × <em>V</em> × <em>C</em><sub>i</sub> )
            </div>
            <div className="key">
              <span><strong>D<sub>i</sub></strong> per-clause deviation (0–1)</span>
              <span><strong>V</strong> commercial value band (1–10)</span>
              <span><strong>C<sub>i</sub></strong> clause criticality (0–1)</span>
            </div>
          </div>

          <div className="grid-2">
            <div className="card">
              <h3>What it gives us</h3>
              <Bullets items={[
                "Composable scoring — clause-level rolls into doc-level rolls into stakeholder-level.",
                "Cheap to compute. No LLM in the loop.",
                "Explainable — a lawyer can see which clause contributed which fraction.",
                "A small deviation in a high-value, high-criticality clause beats a big deviation in a low-stakes one.",
              ]} />
            </div>
            <div className="card">
              <h3>What it doesn't capture</h3>
              <Bullets items={[
                "<strong>D is similarity, not legal materiality</strong> — closely correlated, not identical.",
                "Multiplicative interactions across clauses (weak cap + wide indemnity is worse than the sum).",
                "Stakeholder context — same clause from different counterparties means different things.",
                "Temporal risk — auto-renewal in year 3 isn't visible at signing.",
              ]} />
            </div>
          </div>

          <div className="callout">
            <p><strong>Calibration approach.</strong> Replay the last ~100 human decisions and fit thresholds so the auto-pass band contains zero historical escalations. The formula gives us ordering; the data gives us cut-offs.</p>
          </div>
        </section>

        {/* ============ 7. STANDARD REVIEW PATH ============ */}
        <section id="path">
          <div className="section-head">
            <div className="section-num">07 / Review path</div>
            <h2 className="section">A single contract, lane by lane.</h2>
            <p className="deck">The two <code>alt</code> frames are the only branching logic — everything else is sequential.</p>
          </div>
          <StandardReviewPath />
        </section>

        {/* ============ 8. ENSEMBLE ============ */}
        <section id="ensemble">
          <div className="section-head">
            <div className="section-num">08 / Ensemble review</div>
            <h2 className="section">Three reviewers. One input. Designed to argue.</h2>
            <p className="deck">Different models, different system prompts. Agreement is cheap — disagreement is the cheap escalation signal we want.</p>
          </div>

          <div className="grid-3">
            <div className="persona">
              <span className="p-role">Reviewer 01</span>
              <div className="p-name">The Stickler</div>
              <div className="p-job">Literal wording deviation.</div>
              <Bullets items={[
                "Missing standard clauses.",
                "Changed wording in indemnity, liability, termination.",
                "Clause reordering that signals non-standard drafting.",
                "Anything that doesn't match the known-good library.",
              ]} />
              <div className="p-out">→ JSON: similarity %, status per clause, risk flags</div>
            </div>
            <div className="persona commercial">
              <span className="p-role">Reviewer 02</span>
              <div className="p-name">The Commercial</div>
              <div className="p-job">Business exposure, not wording.</div>
              <Bullets items={[
                "Liability cap size.",
                "Payment terms &amp; auto-renewal risk.",
                "Termination rights.",
                "Spend &amp; value band — what's actually at stake.",
              ]} />
              <div className="p-out">→ JSON: commercial risk score, value band, impact per clause</div>
            </div>
            <div className="persona adversary">
              <span className="p-role">Reviewer 03</span>
              <div className="p-name">The Adversary</div>
              <div className="p-job">Loopholes, ambiguity, hidden risk.</div>
              <Bullets items={[
                "Vague liability or indemnity language.",
                "Hidden carve-outs.",
                "Jurisdiction or data-transfer risk.",
                "Anything that could become a dispute later.",
              ]} />
              <div className="p-out">→ JSON: loophole score, issue type, severity</div>
            </div>
          </div>
          <div className="callout">
            <p><strong>The orchestrator</strong> reads all three JSON outputs, finds 2/3 or 3/3 agreement, ranks disagreements by urgency, and decides: auto-pass, pass with warning, or manual review. Models output structured JSON only — no free text the system can't audit.</p>
          </div>
        </section>

        {/* ============ 9. FAILURE LOOP ============ */}
        <section id="failure">
          <div className="section-head">
            <div className="section-num">09 / Failure analysis</div>
            <h2 className="section">A failed check isn't a stop. It's a start.</h2>
            <p className="deck">Most policy failures aren't fatal — they're context-dependent. The loop tells you which way to lean before a human sees it.</p>
          </div>
          <FailureAnalysisLoop />
        </section>

        {/* ============ 10. DATA MODEL ============ */}
        <section id="data">
          <div className="section-head">
            <div className="section-num">10 / Data model</div>
            <h2 className="section">What we store, and why.</h2>
            <p className="deck">Three core entities and a knowledge graph linking them. Lean by design — every field exists to support an audit or a routing decision.</p>
          </div>

          <h3 className="mt-3">Document entity</h3>
          <div className="data-table mt-2">
            <table>
              <thead><tr><th>Field</th><th>Type</th><th>Purpose</th></tr></thead>
              <tbody>
                <tr><td>document_id</td><td>string</td><td>Unique identifier — primary key.</td></tr>
                <tr><td>document_type</td><td>string</td><td>NDA, MSA, SOW, Order Form — used for bucketing.</td></tr>
                <tr><td>extracted_markdown</td><td>text</td><td>Clean, diff-able representation of the source.</td></tr>
                <tr><td>similarity_score</td><td>float</td><td>Overall match to accepted precedent.</td></tr>
                <tr><td>risk_score</td><td>float</td><td>Weighted score, from the risk formula.</td></tr>
                <tr><td>value_band</td><td>integer</td><td>1–10. Set by legal at intake.</td></tr>
                <tr><td>review_status</td><td>enum</td><td>Pending · Approved · Failed · Escalated.</td></tr>
              </tbody>
            </table>
          </div>

          <h3 className="mt-4">Clause entity</h3>
          <div className="data-table mt-2">
            <table>
              <thead><tr><th>Field</th><th>Type</th><th>Purpose</th></tr></thead>
              <tbody>
                <tr><td>clause_id</td><td>string</td><td>Unique identifier — clauses are first-class.</td></tr>
                <tr><td>clause_type</td><td>string</td><td>Liability · indemnity · governing law · etc.</td></tr>
                <tr><td>similarity_score</td><td>float</td><td>Per-clause match — the bit that actually matters.</td></tr>
                <tr><td>matched_good_id</td><td>string</td><td>Closest accepted example, for context.</td></tr>
                <tr><td>matched_bad_id</td><td>string</td><td>Closest rejected example, for context.</td></tr>
                <tr><td>deviation_flag</td><td>boolean</td><td>Used by the rules engine for fast checks.</td></tr>
              </tbody>
            </table>
          </div>

          <h3 className="mt-4">Model review entity</h3>
          <div className="data-table mt-2">
            <table>
              <thead><tr><th>Field</th><th>Type</th><th>Purpose</th></tr></thead>
              <tbody>
                <tr><td>review_id</td><td>string</td><td>One per model run.</td></tr>
                <tr><td>model_name</td><td>string</td><td>GPT-4o, Claude, Gemini.</td></tr>
                <tr><td>output_json</td><td>json</td><td>Structured output — schema-validated.</td></tr>
                <tr><td>confidence</td><td>float</td><td>Self-reported confidence, used as a signal not a gate.</td></tr>
                <tr><td>consensus_status</td><td>enum</td><td>Agree · Disagree · Partial.</td></tr>
              </tbody>
            </table>
          </div>

          <p className="mt-3">The <strong>knowledge graph</strong> sits on top of these and stores relationships: <em>"Stakeholder A accepted Clause B under Condition C"</em>, <em>"Clause X failed because of liability cap overreach"</em>, <em>"Project Z produced an exception that was later reused"</em>. The graph is what lets the system remember <em>not just what was seen, but what was accepted, rejected, or overridden</em>.</p>
        </section>

        {/* ============ 11. STOCHASTIC QA + GOVERNANCE ============ */}
        <section id="qa">
          <div className="section-head">
            <div className="section-num">11 / Stochastic QA &amp; governance</div>
            <h2 className="section">The 5% that keeps the system honest.</h2>
            <p className="deck">Auto-approval is the most dangerous part of the system. Stochastic QA is the cheapest defence against silent over-automation.</p>
          </div>

          <div className="grid-2">
            <div className="card">
              <h3>QA sampling</h3>
              <Bullets items={[
                "<strong>5% of auto-approvals</strong> selected at random for blind human review on a cron.",
                "QA outcomes fed back into precedent memory.",
                "Sampling rate should vary by risk band — higher for high-value contracts.",
                "If the false-negative rate trends up, thresholds tighten automatically (with legal sign-off).",
              ]} />
            </div>
            <div className="card">
              <h3>Security &amp; governance</h3>
              <Bullets items={[
                "Contract text treated as <strong>untrusted input</strong>. Never concatenated into system prompts.",
                "Source files &amp; extracted Markdown encrypted at rest.",
                "Prompt versions and policy rules versioned &amp; approved through PR review.",
                "Legal owns hard-fail criteria. Engineering owns the pipeline. Neither can override the other in production.",
              ]} />
            </div>
          </div>
        </section>

        {/* ============ 12. WHAT TO BUILD FIRST ============ */}
        <section id="first">
          <div className="section-head">
            <div className="section-num">12 / First slice</div>
            <h2 className="section">What I would build first.</h2>
            <p className="deck">A two-week thin end-to-end slice. Not the system — just enough to prove the core flow works on real documents.</p>
          </div>

          <div className="grid-2">
            <div className="card">
              <h3 className="amber">Ship in v1</h3>
              <Bullets items={[
                "Markdown extraction (PyPDF / python-docx + formatter).",
                "Cosine similarity on a precedent set of ~10 NDAs.",
                "Single-model review with structured JSON output.",
                "Thin upload UI + CSV export of flags.",
                "One real legal decision made by week 2.",
              ]} />
            </div>
            <div className="card tinted">
              <h3 className="muted">Defer to v2</h3>
              <Bullets items={[
                "Three-model ensemble wash.",
                "Knowledge graph &amp; relationship indexing.",
                "GitLab CI pipeline.",
                "Stakeholder profiles and learned exceptions.",
                "Dashboard &amp; lawyer-facing triage UI.",
              ]} />
            </div>
          </div>

          <div className="callout mt-3">
            <p><strong>The deliverable isn't the prototype.</strong> The deliverable is one auto-decision the legal team would otherwise have made manually, plus a 1-pager telling them what to build next.</p>
          </div>
        </section>

        {/* ============ FOOTER ============ */}
        <footer className="doc-foot">
          <div className="left">
            Project Immunity
            <span className="sub">Contract similarity &amp; risk orchestration · v1.0 draft</span>
          </div>
          <div className="right">
            Submission for <strong>PortSwigger</strong><br />
            Roving AI builder · 2026
          </div>
        </footer>
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);