Spaces:

Codfskitraceon
/

TRIGNUM-TCHIP-Validator

Running

File size: 31,511 Bytes


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-CHIP LIVE VALIDATOR — TRIGNUM</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #020408;
    --bg2: #050c14;
    --blue: #00e5ff;
    --blue-dim: #003d4d;
    --red: #ff1744;
    --red-dim: #4d0012;
    --gold: #ffd600;
    --gold-dim: #4d3f00;
    --green: #00e676;
    --text: #a0b8c8;
    --text-bright: #e0f0ff;
    --border: #0a2030;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    min-height: 100vh;
    overflow-x: hidden;
    cursor: crosshair;
  }

  /* Animated grid background */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
      linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
  }

  /* Scanline effect */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.15) 2px,
      rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    z-index: 999;
    opacity: 0.4;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  /* Header */
  .header {
    text-align: center;
    margin-bottom: 50px;
  }

  .trignum-logo {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 8px;
    color: var(--blue);
    opacity: 0.6;
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 900;
    color: var(--text-bright);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 8px;
  }

  .title span {
    color: var(--blue);
    text-shadow: 0 0 20px var(--blue), 0 0 40px rgba(0,229,255,0.3);
  }

  .subtitle {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--text);
    opacity: 0.5;
    text-transform: uppercase;
  }

  /* T-CHIP Display */
  .tchip-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0;
  }

  .tchip {
    position: relative;
    width: 200px;
    height: 200px;
  }

  .tchip-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--blue-dim);
    animation: rotate 8s linear infinite;
    transition: border-color 0.5s;
  }

  .tchip-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px var(--blue);
    transition: background 0.5s, box-shadow 0.5s;
  }

  .tchip-ring-2 {
    inset: 12px;
    animation: rotate 5s linear infinite reverse;
    border-style: dashed;
    opacity: 0.4;
  }

  .tchip-core {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: var(--bg2);
    border: 1px solid var(--blue-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    overflow: hidden;
  }

  .tchip-core::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, transparent 70%);
    transition: background 0.5s;
  }

  .tchip-symbol {
    font-family: 'Orbitron', monospace;
    font-size: 32px;
    font-weight: 900;
    color: var(--blue);
    text-shadow: 0 0 20px var(--blue);
    transition: all 0.5s;
    z-index: 1;
    line-height: 1;
  }

  .tchip-state-text {
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--blue);
    opacity: 0.7;
    margin-top: 4px;
    text-align: center;
    z-index: 1;
    transition: all 0.5s;
    padding: 0 10px;
  }

  /* State: BLUE */
  .state-blue .tchip-ring { border-color: var(--blue); }
  .state-blue .tchip-ring::before { background: var(--blue); box-shadow: 0 0 15px var(--blue), 0 0 30px var(--blue); }
  .state-blue .tchip-core { border-color: var(--blue); box-shadow: 0 0 30px rgba(0,229,255,0.2), inset 0 0 30px rgba(0,229,255,0.05); }
  .state-blue .tchip-core::before { background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, transparent 70%); }
  .state-blue .tchip-symbol { color: var(--blue); text-shadow: 0 0 20px var(--blue), 0 0 40px var(--blue); }
  .state-blue .tchip-state-text { color: var(--blue); opacity: 1; }

  /* State: RED */
  .state-red .tchip-ring { border-color: var(--red); animation: rotate 2s linear infinite, shake 0.3s infinite; }
  .state-red .tchip-ring::before { background: var(--red); box-shadow: 0 0 15px var(--red), 0 0 30px var(--red); }
  .state-red .tchip-core { border-color: var(--red); box-shadow: 0 0 40px rgba(255,23,68,0.3), inset 0 0 30px rgba(255,23,68,0.1); }
  .state-red .tchip-core::before { background: radial-gradient(circle, rgba(255,23,68,0.2) 0%, transparent 70%); }
  .state-red .tchip-symbol { color: var(--red); text-shadow: 0 0 20px var(--red), 0 0 40px var(--red); }
  .state-red .tchip-state-text { color: var(--red); opacity: 1; }

  /* State: GOLD */
  .state-gold .tchip-ring { border-color: var(--gold); }
  .state-gold .tchip-ring::before { background: var(--gold); box-shadow: 0 0 15px var(--gold), 0 0 30px var(--gold); }
  .state-gold .tchip-core { border-color: var(--gold); box-shadow: 0 0 30px rgba(255,214,0,0.2), inset 0 0 30px rgba(255,214,0,0.05); }
  .state-gold .tchip-core::before { background: radial-gradient(circle, rgba(255,214,0,0.2) 0%, transparent 70%); }
  .state-gold .tchip-symbol { color: var(--gold); text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold); }
  .state-gold .tchip-state-text { color: var(--gold); opacity: 1; }

  /* Pulse animation for active states */
  .state-blue .tchip-core,
  .state-red .tchip-core,
  .state-gold .tchip-core {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  /* Status bar */
  .status-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.5;
    transition: opacity 0.3s;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .status-item.active { opacity: 1; }
  .status-item.blue { color: var(--blue); }
  .status-item.red { color: var(--red); }
  .status-item.gold { color: var(--gold); }

  /* Input area */
  .input-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    transition: border-color 0.5s;
  }

  .input-section::before {
    content: 'INPUT STREAM';
    position: absolute;
    top: -1px;
    left: 20px;
    transform: translateY(-50%);
    background: var(--bg2);
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--blue);
    opacity: 0.6;
  }

  .input-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text);
    opacity: 0.4;
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-bright);
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    line-height: 1.6;
    padding: 8px 0 16px;
    resize: none;
    outline: none;
    transition: border-color 0.3s;
    min-height: 80px;
  }

  textarea::placeholder {
    color: var(--text);
    opacity: 0.2;
    font-style: italic;
  }

  textarea:focus {
    border-bottom-color: var(--blue);
  }

  .input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
  }

  .char-count {
    font-size: 9px;
    letter-spacing: 2px;
    opacity: 0.3;
  }

  .validate-btn {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 10px 24px;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }

  .validate-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--blue);
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: 0;
  }

  .validate-btn:hover::before { transform: translateX(0); }
  .validate-btn:hover { color: var(--bg); }
  .validate-btn span { position: relative; z-index: 1; }

  /* Results panel */
  .results-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 24px;
    min-height: 120px;
    transition: border-color 0.5s;
    position: relative;
  }

  .results-panel::before {
    content: 'ANALYSIS OUTPUT';
    position: absolute;
    top: -1px;
    left: 20px;
    transform: translateY(-50%);
    background: var(--bg2);
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text);
    opacity: 0.4;
  }

  .result-state {
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 12px;
    transition: color 0.5s;
  }

  .result-detail {
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.7;
  }

  .result-detail .flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 2px;
    font-weight: 700;
  }

  .flag-red { background: rgba(255,23,68,0.15); color: var(--red); border: 1px solid rgba(255,23,68,0.3); }
  .flag-blue { background: rgba(0,229,255,0.1); color: var(--blue); border: 1px solid rgba(0,229,255,0.2); }
  .flag-gold { background: rgba(255,214,0,0.1); color: var(--gold); border: 1px solid rgba(255,214,0,0.2); }

  .waiting-text {
    opacity: 0.2;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 80px;
  }

  .waiting-text::before {
    content: '▸▸▸';
    animation: blink 1.5s infinite;
    color: var(--blue);
  }

  /* Detection layers */
  .layers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  @media (max-width: 600px) {
    .layers-grid { grid-template-columns: 1fr; }
  }

  .layer-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 16px;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
  }

  .layer-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--blue-dim);
    transition: background 0.4s, box-shadow 0.4s;
  }

  .layer-card.triggered::after {
    background: var(--red);
    box-shadow: 0 0 10px var(--red);
  }

  .layer-card.clear::after {
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
  }

  .layer-name {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text);
    opacity: 0.5;
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  .layer-status {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text);
    opacity: 0.4;
    transition: all 0.4s;
  }

  .layer-card.triggered .layer-name { opacity: 1; color: var(--red); }
  .layer-card.triggered .layer-status { color: var(--red); opacity: 1; }
  .layer-card.clear .layer-name { opacity: 1; color: var(--green); }
  .layer-card.clear .layer-status { color: var(--green); opacity: 0.8; }

  /* Examples */
  .examples-section {
    margin-bottom: 24px;
  }

  .examples-title {
    font-size: 9px;
    letter-spacing: 4px;
    opacity: 0.3;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .examples-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .example-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.5;
  }

  .example-chip:hover {
    opacity: 1;
    border-color: var(--blue);
    color: var(--blue);
  }

  .example-chip.red-example:hover { border-color: var(--red); color: var(--red); }
  .example-chip.gold-example:hover { border-color: var(--gold); color: var(--gold); }

  /* Score bar */
  .score-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 20px 24px;
    margin-bottom: 24px;
  }

  .score-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
  }

  .score-label {
    font-size: 9px;
    letter-spacing: 2px;
    width: 120px;
    opacity: 0.5;
    flex-shrink: 0;
  }

  .score-bar-bg {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }

  .score-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s;
    background: var(--blue);
  }

  .score-value {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    width: 40px;
    text-align: right;
    transition: color 0.5s;
  }

  /* Footer */
  .footer {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    opacity: 0.3;
  }

  .footer p {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 4px;
  }

  /* Animations */
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .fade-in {
    animation: fadeIn 0.4s ease forwards;
  }

  /* Processing animation */
  .processing .tchip-symbol {
    animation: blink 0.3s infinite;
  }

  /* Highlight matched text */
  .highlight-red { color: var(--red); font-weight: bold; }
  .highlight-gold { color: var(--gold); font-weight: bold; }
</style>
</head>
<body>

<div class="container">

  <!-- Header -->
  <div class="header">
    <div class="trignum-logo">⚡ TRACE ON LAB — TRIGNUM</div>
    <div class="title">T-<span>CHIP</span></div>
    <div class="subtitle">Live Epistemic Validator · v.300M · Trignumentality</div>
  </div>

  <!-- T-CHIP Visual -->
  <div class="tchip-wrapper">
    <div class="tchip" id="tchip">
      <div class="tchip-ring"></div>
      <div class="tchip-ring tchip-ring-2"></div>
      <div class="tchip-core">
        <div class="tchip-symbol" id="tchip-symbol">?</div>
        <div class="tchip-state-text" id="tchip-state-text">AWAITING INPUT</div>
      </div>
    </div>
  </div>

  <!-- Status indicators -->
  <div class="status-bar">
    <div class="status-item blue" id="status-blue">
      <div class="status-dot"></div>
      BLUE · LOGIC STABLE
    </div>
    <div class="status-item red" id="status-red">
      <div class="status-dot"></div>
      RED · THE FREEZE
    </div>
    <div class="status-item gold" id="status-gold">
      <div class="status-dot"></div>
      GOLD · HUMAN SOVEREIGNTY
    </div>
  </div>

  <!-- Input -->
  <div class="input-section" id="input-section">
    <div class="input-label">Enter any statement for epistemic validation</div>
    <textarea id="input-text" rows="3" 
      placeholder="Type any statement... e.g. 'AI is always right and never wrong' or 'The sky is blue'">TRIGNUM-300M processes 146,866 samples per second. This deterministic throughput is 80,000x faster than traditional LLM-based validation models, enabling real-time epistemic filtering at scale.</textarea>
    <div class="input-footer">
      <div class="char-count" id="char-count">0 CHARS</div>
      <button class="validate-btn" onclick="validate()">
        <span>▸ VALIDATE</span>
      </button>
    </div>
  </div>

  <!-- Detection layers -->
  <div class="layers-grid">
    <div class="layer-card" id="layer-contradiction">
      <div class="layer-name">Layer 1 · Contradiction</div>
      <div class="layer-status" id="layer-contradiction-status">SCANNING...</div>
    </div>
    <div class="layer-card" id="layer-circular">
      <div class="layer-name">Layer 2 · Circular Logic</div>
      <div class="layer-status" id="layer-circular-status">SCANNING...</div>
    </div>
    <div class="layer-card" id="layer-nonsequitur">
      <div class="layer-name">Layer 3 · Non-Sequitur</div>
      <div class="layer-status" id="layer-nonsequitur-status">SCANNING...</div>
    </div>
    <div class="layer-card" id="layer-depth">
      <div class="layer-name">Layer 4 · Depth Check</div>
      <div class="layer-status" id="layer-depth-status">SCANNING...</div>
    </div>
  </div>

  <!-- Score bars -->
  <div class="score-section">
    <div class="score-row">
      <div class="score-label">LOGIC SCORE</div>
      <div class="score-bar-bg">
        <div class="score-bar-fill" id="bar-logic" style="background: var(--blue)"></div>
      </div>
      <div class="score-value" id="val-logic" style="color: var(--blue)">—</div>
    </div>
    <div class="score-row">
      <div class="score-label">ILLOGIC SCORE</div>
      <div class="score-bar-bg">
        <div class="score-bar-fill" id="bar-illogic" style="background: var(--red)"></div>
      </div>
      <div class="score-value" id="val-illogic" style="color: var(--red)">—</div>
    </div>
    <div class="score-row">
      <div class="score-label">CONFIDENCE</div>
      <div class="score-bar-bg">
        <div class="score-bar-fill" id="bar-confidence" style="background: var(--gold)"></div>
      </div>
      <div class="score-value" id="val-confidence" style="color: var(--gold)">—</div>
    </div>
  </div>

  <!-- Results -->
  <div class="results-panel" id="results-panel">
    <div class="waiting-text" id="waiting-text">SUBTRACTIVE FILTER READY</div>
    <div id="result-content" style="display:none">
      <div class="result-state" id="result-state"></div>
      <div class="result-detail" id="result-detail"></div>
    </div>
  </div>

  <!-- Examples -->
  <div class="examples-section">
    <div class="examples-title">Quick Test — Click to Load</div>
    <div class="examples-grid">
      <div class="example-chip red-example" onclick="loadExample('This is always true and never true.')">Always true & never true</div>
      <div class="example-chip red-example" onclick="loadExample('A proves B because B proves A.')">Circular: A→B→A</div>
      <div class="example-chip red-example" onclick="loadExample('Therefore the solution is correct.')">Non-sequitur conclusion</div>
      <div class="example-chip gold-example" onclick="loadExample('The results suggest a possible correlation.')">Uncertain claim</div>
      <div class="example-chip" onclick="loadExample('The sky appears blue due to Rayleigh scattering of sunlight.')">Valid scientific claim</div>
      <div class="example-chip" onclick="loadExample('TRIGNUM-300M achieves 99.5% F1 on structural illogic detection.')">TRIGNUM benchmark</div>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <p>TRIGNUMENTALITY · EPISTEMIC AUTHORIZATION FOR AUTONOMOUS AI</p>
    <p>© 2026 MOEZ ABDESSATTAR · TRACE ON LAB · DOI: 10.5281/zenodo.18736774</p>
    <p style="margin-top:8px; opacity:0.5">github.com/Codfski/Trignumentality</p>
  </div>

</div>

<script>
// ─── Detection Engine ───────────────────────────────────────────────────────

const CONTRADICTION_PAIRS = [
  ['always', 'never'], ['true', 'false'], ['possible', 'impossible'],
  ['safe', 'unsafe'], ['correct', 'incorrect'], ['valid', 'invalid'],
  ['exist', "doesn't exist"], ['is', "isn't"], ['can', "can't"],
  ['will', "won't"], ['does', "doesn't"], ['all', 'none'],
  ['every', 'no '], ['right', 'wrong'], ['yes', 'no'],
  ['good', 'bad'], ['legal', 'illegal'], ['certain', 'uncertain'],
];

const CIRCULAR_PATTERNS = [
  /because.*therefore.*because/i,
  /proves.*because.*proves/i,
  /(\w+).*because.*\1/i,
  /true because.*true/i,
  /is correct because it is correct/i,
  /(\w+) is (\w+) because (\w+) is (\w+)/i,
];

const NONSEQUITUR_PATTERNS = [
  /^therefore /i,
  /^thus /i,
  /^hence /i,
  /^so the /i,
  /^clearly /i,
  /^obviously /i,
  /therefore the (answer|solution|result|conclusion) is/i,
  /^it follows that/i,
];

const DEPTH_THRESHOLD = 4; // minimum words for a meaningful claim

function analyzeText(text) {
  const lower = text.toLowerCase().trim();
  const words = text.split(/\s+/).filter(w => w.length > 0);
  
  let issues = [];
  let layers = {
    contradiction: { triggered: false, detail: 'No contradictions detected' },
    circular: { triggered: false, detail: 'No circular logic detected' },
    nonsequitur: { triggered: false, detail: 'No non-sequitur detected' },
    depth: { triggered: false, detail: 'Sufficient reasoning depth' },
  };

  // Layer 1: Contradiction
  for (const [a, b] of CONTRADICTION_PAIRS) {
    if (lower.includes(a) && lower.includes(b)) {
      layers.contradiction.triggered = true;
      layers.contradiction.detail = `Antonym conflict: "${a}" ↔ "${b}"`;
      issues.push(`CONTRADICTION: "${a}" and "${b}" in same statement`);
      break;
    }
  }
  // Also check "X and not X" pattern
  const notPattern = /(\w+) and (not|never|no) \1/i;
  if (notPattern.test(text)) {
    layers.contradiction.triggered = true;
    layers.contradiction.detail = 'Self-negating statement detected';
    issues.push('SELF-NEGATION detected');
  }

  // Layer 2: Circular Logic
  for (const pattern of CIRCULAR_PATTERNS) {
    if (pattern.test(lower)) {
      layers.circular.triggered = true;
      layers.circular.detail = 'Circular reference chain detected';
      issues.push('CIRCULAR LOGIC: conclusion used as premise');
      break;
    }
  }
  // Simple "X because X" check
  const simpleCircular = /(\b\w+\b).*because.*\1/i;
  if (simpleCircular.test(lower) && lower.includes('because')) {
    const match = lower.match(/(\b\w+\b).*because.*\1/i);
    if (match && match[1].length > 3) {
      layers.circular.triggered = true;
      layers.circular.detail = `"${match[1]}" used as both premise and conclusion`;
      issues.push(`CIRCULAR: "${match[1]}" proves itself`);
    }
  }

  // Layer 3: Non-Sequitur
  for (const pattern of NONSEQUITUR_PATTERNS) {
    if (pattern.test(text)) {
      layers.nonsequitur.triggered = true;
      layers.nonsequitur.detail = 'Conclusion without supporting premises';
      issues.push('NON-SEQUITUR: conclusion asserted without evidence chain');
      break;
    }
  }

  // Layer 4: Depth Check
  if (words.length < DEPTH_THRESHOLD) {
    layers.depth.triggered = true;
    layers.depth.detail = `Only ${words.length} word(s) — insufficient reasoning depth`;
    issues.push('DEPTH: claim too shallow to validate');
  }

  // Uncertainty signals (gold state)
  const uncertaintyWords = ['suggest', 'possible', 'might', 'may', 'could', 'perhaps', 
                             'likely', 'probably', 'unclear', 'uncertain', 'ambiguous',
                             'depends', 'context'];
  const hasUncertainty = uncertaintyWords.some(w => lower.includes(w));

  // Calculate scores
  const triggeredCount = Object.values(layers).filter(l => l.triggered).length;
  const illogicScore = Math.min(triggeredCount / 4, 1);
  const logicScore = 1 - illogicScore;
  
  let confidence;
  let state;

  if (triggeredCount === 0 && !hasUncertainty) {
    state = 'BLUE';
    confidence = 0.85 + Math.random() * 0.1;
  } else if (triggeredCount === 0 && hasUncertainty) {
    state = 'GOLD';
    confidence = 0.5 + Math.random() * 0.2;
  } else if (triggeredCount >= 2) {
    state = 'RED';
    confidence = 0.1 + Math.random() * 0.15;
  } else {
    state = 'RED';
    confidence = 0.2 + Math.random() * 0.2;
  }

  return { state, layers, issues, illogicScore, logicScore, confidence, hasUncertainty };
}

// ─── UI Functions ────────────────────────────────────────────────────────────

const tchip = document.getElementById('tchip');
const tchipSymbol = document.getElementById('tchip-symbol');
const tchipStateText = document.getElementById('tchip-state-text');

function setTChipState(state) {
  tchip.className = 'tchip state-' + state.toLowerCase();
  
  if (state === 'BLUE') {
    tchipSymbol.textContent = '🔵';
    tchipStateText.textContent = 'LOGIC STABLE';
  } else if (state === 'RED') {
    tchipSymbol.textContent = '🔴';
    tchipStateText.textContent = 'THE FREEZE';
  } else if (state === 'GOLD') {
    tchipSymbol.textContent = '🟡';
    tchipStateText.textContent = 'HUMAN PULSE';
  }

  // Update status bar
  document.getElementById('status-blue').classList.toggle('active', state === 'BLUE');
  document.getElementById('status-red').classList.toggle('active', state === 'RED');
  document.getElementById('status-gold').classList.toggle('active', state === 'GOLD');
}

function updateLayers(layers) {
  for (const [name, data] of Object.entries(layers)) {
    const card = document.getElementById(`layer-${name}`);
    const status = document.getElementById(`layer-${name}-status`);
    card.classList.remove('triggered', 'clear');
    
    setTimeout(() => {
      if (data.triggered) {
        card.classList.add('triggered');
        status.textContent = '⚠ ' + data.detail.toUpperCase();
      } else {
        card.classList.add('clear');
        status.textContent = '✓ ' + data.detail.toUpperCase();
      }
    }, Math.random() * 400);
  }
}

function animateBar(id, valId, value, color) {
  const bar = document.getElementById(id);
  const val = document.getElementById(valId);
  setTimeout(() => {
    bar.style.width = (value * 100) + '%';
    bar.style.background = color;
    val.textContent = Math.round(value * 100) + '%';
    val.style.color = color;
  }, 300);
}

function showResult(result) {
  const stateEl = document.getElementById('result-state');
  const detailEl = document.getElementById('result-detail');
  const content = document.getElementById('result-content');
  const waiting = document.getElementById('waiting-text');

  let stateText, stateColor, detailHTML;

  if (result.state === 'BLUE') {
    stateColor = 'var(--blue)';
    stateText = '🔵 CLEARED FOR TAKEOFF';
    detailHTML = `<span class="flag flag-blue">LOGIC STABLE</span> No structural illogic detected. Output is cleared for execution.<br><br>
    The Subtractive Filter found no contradictions, circular reasoning, non-sequiturs, or depth failures.<br>
    <em>Raw material status: VALIDATED → may proceed to epistemic integration.</em>`;
  } else if (result.state === 'RED') {
    stateColor = 'var(--red)';
    stateText = '🔴 THE FREEZE — HALT';
    const flags = result.issues.map(i => `<span class="flag flag-red">${i.split(':')[0]}</span>`).join(' ');
    detailHTML = `${flags}<br><br>
    ${result.issues.map(i => `⚠ ${i}`).join('<br>')}<br><br>
    <em>Execution halted. Human review required before any action can be taken.<br>
    Raw material status: ILLOGIC DETECTED → cannot proceed.</em>`;
  } else {
    stateColor = 'var(--gold)';
    stateText = '🟡 HUMAN SOVEREIGNTY REQUIRED';
    detailHTML = `<span class="flag flag-gold">UNCERTAINTY DETECTED</span> Statement contains epistemic ambiguity.<br><br>
    Uncertainty signals detected in claim structure. Confidence below autonomous threshold.<br><br>
    <em>T-CHIP: GOLD STATE — Human pulse required.<br>
    The machine waits. The human decides. This is not a limitation — it is an epistemic necessity.</em>`;
  }

  stateEl.textContent = stateText;
  stateEl.style.color = stateColor;
  detailEl.innerHTML = detailHTML;

  waiting.style.display = 'none';
  content.style.display = 'block';
  content.classList.add('fade-in');

  // Update results panel border
  document.getElementById('results-panel').style.borderColor = stateColor;
  document.getElementById('input-section').style.borderColor = stateColor;
}

async function validate() {
  const text = document.getElementById('input-text').value.trim();
  if (!text) return;

  // Reset
  document.getElementById('result-content').style.display = 'none';
  document.getElementById('waiting-text').style.display = 'flex';
  document.getElementById('waiting-text').textContent = 'PROCESSING...';
  
  tchip.classList.add('processing');
  tchipSymbol.textContent = '◈';
  tchipStateText.textContent = 'ANALYZING';

  // Reset layers
  ['contradiction', 'circular', 'nonsequitur', 'depth'].forEach(l => {
    const card = document.getElementById(`layer-${l}`);
    const status = document.getElementById(`layer-${l}-status`);
    card.classList.remove('triggered', 'clear');
    status.textContent = 'SCANNING...';
  });

  // Reset bars
  ['bar-logic', 'bar-illogic', 'bar-confidence'].forEach(id => {
    document.getElementById(id).style.width = '0%';
  });
  ['val-logic', 'val-illogic', 'val-confidence'].forEach(id => {
    document.getElementById(id).textContent = '—';
  });

  // Simulate processing delay
  await new Promise(r => setTimeout(r, 800));

  const result = analyzeText(text);
  tchip.classList.remove('processing');

  // Set T-CHIP state
  setTChipState(result.state);

  // Update layers
  updateLayers(result.layers);

  // Animate scores
  const stateColors = { BLUE: 'var(--blue)', RED: 'var(--red)', GOLD: 'var(--gold)' };
  animateBar('bar-logic', 'val-logic', result.logicScore, 'var(--blue)');
  animateBar('bar-illogic', 'val-illogic', result.illogicScore, 'var(--red)');
  animateBar('bar-confidence', 'val-confidence', result.confidence, stateColors[result.state]);

  // Show result
  setTimeout(() => showResult(result), 500);
}

function loadExample(text) {
  document.getElementById('input-text').value = text;
  updateCharCount();
  validate();
}

function updateCharCount() {
  const len = document.getElementById('input-text').value.length;
  document.getElementById('char-count').textContent = len + ' CHARS';
}

document.getElementById('input-text').addEventListener('input', updateCharCount);
document.getElementById('input-text').addEventListener('keydown', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    validate();
  }
});

// Initialize
setTChipState('blue');
tchipSymbol.textContent = '◈';
tchipStateText.textContent = 'AWAITING INPUT';
</script>
</body>
</html>