Adversarial upgrade: add 4th domain (Customer Service), interactive editable input, and debounce protection

index.html

@@ -323,15 +323,24 @@
     }
 
     .sim-input-box {
-      background: rgba(0, 0, 0, 0.4);
+      width: 100%;
+      background: rgba(0, 0, 0, 0.45);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 16px;
       font-family: monospace;
       font-size: 13px;
-      color: #cfd8dc;
+      color: #e2e8f0;
       margin-bottom: 24px;
-      min-height: 70px;
+      min-height: 85px;
+      line-height: 1.5;
+      resize: vertical;
+      outline: none;
+      transition: all 0.2s;
+    }
+    .sim-input-box:focus {
+      border-color: var(--cyan);
+      box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
     }
 
     .sim-run-bar {
@@ -602,12 +611,11 @@
             <button class="scenario-btn active" onclick="setScenario(0)">Cloud Incident</button>
             <button class="scenario-btn" onclick="setScenario(1)">Invoice Auditing</button>
             <button class="scenario-btn" onclick="setScenario(2)">SOC Security Breach</button>
+            <button class="scenario-btn" onclick="setScenario(3)">Customer Service</button>
           </div>
         </div>
 
-        <div class="sim-input-box" id="sim-input">
-          Loading scenario...
-        </div>
+        <textarea class="sim-input-box" id="sim-input" rows="3" spellcheck="false" placeholder="Enter custom state or select a scenario above..."></textarea>
 
         <div class="sim-run-bar">
           <button class="run-btn" id="run-btn" onclick="runSimulation()">
@@ -750,7 +758,7 @@
   <script>
     const scenarios = [
       {
-        text: "Production API Gateway Alert: 504 Gateway Timeout spiked to 14.8%. Kubernetes pod eviction detected on cluster-eu-west-1 due to memory limit breach (96.4%). Database pool exhausted.",
+        text: "Production API Gateway Alert: 504 Gateway Timeout spiked to 14.8%. Kubernetes pod eviction detected on cluster-eu-west-1 due to memory limit breach (96.4%). Database connection pool exhausted.",
         choice: "Infrastructure Resource Exhaustion",
         choiceBar: "95.6%",
         choiceDesc: "Confidence: 95.6% (Top Category)",
@@ -790,27 +798,116 @@
         scoreBar: "95%",
         scoreColor: "#ff1744",
         scoreDesc: "Threat Score: 0.950"
+      },
+      {
+        text: "Enterprise Support Escalation: Strategic account (ARR > $150k) experiencing repeated 502 Bad Gateway failures on checkout service during peak traffic. Customer threatens account churn within 1 hour.",
+        choice: "High-Priority SLA Breach Risk",
+        choiceBar: "96.8%",
+        choiceDesc: "Confidence: 96.8% (Tier-1 SLA)",
+        noul: "YES (Page Enterprise Engineering Lead)",
+        noulBar: "99.1%",
+        noulColor: "#ff1744",
+        noulDesc: "Escalation Probability: 0.991",
+        score: "0.920 — Urgent Escalation",
+        scoreBar: "92%",
+        scoreColor: "#ff5252",
+        scoreDesc: "Severity Scalar: 0.920"
       }
     ];
 
     let currentScenario = 0;
+    let isComputing = false;
 
     function setScenario(idx) {
       currentScenario = idx;
       document.querySelectorAll('.scenario-btn').forEach((b, i) => {
         b.classList.toggle('active', i === idx);
       });
-      document.getElementById('sim-input').innerText = scenarios[idx].text;
+      document.getElementById('sim-input').value = scenarios[idx].text;
       runSimulation();
     }
 
+    function evaluateCustomInput(raw) {
+      const lower = raw.toLowerCase();
+      if (lower.includes('breach') || lower.includes('beacon') || lower.includes('exploit') || lower.includes('malicious') || lower.includes('hack') || lower.includes('auth') || lower.includes('credential')) {
+        return {
+          choice: "Security Incident / Breach Triage",
+          choiceBar: "97.5%",
+          choiceDesc: "Confidence: 97.5% (High Confidence)",
+          noul: "YES (Isolate Host & Trigger SOC)",
+          noulBar: "98.9%",
+          noulColor: "#ff1744",
+          noulDesc: "Action Probability: 0.989",
+          score: "0.930 — Critical Threat",
+          scoreBar: "93%",
+          scoreColor: "#ff1744",
+          scoreDesc: "Threat Score: 0.930"
+        };
+      } else if (lower.includes('invoice') || lower.includes('bill') || lower.includes('po ') || lower.includes('price') || lower.includes('vendor') || lower.includes('dollar') || lower.includes('$') || lower.includes('discrepancy')) {
+        return {
+          choice: "Invoice Discrepancy & Reconciliation",
+          choiceBar: "93.8%",
+          choiceDesc: "Confidence: 93.8% (Audit Gate)",
+          noul: "YES (Hold Payment Release)",
+          noulBar: "96.4%",
+          noulColor: "#ff9100",
+          noulDesc: "Variance Threshold: 0.964",
+          score: "0.670 — Moderate Variance",
+          scoreBar: "67%",
+          scoreColor: "#00e5ff",
+          scoreDesc: "Variance Scalar: 0.670"
+        };
+      } else if (lower.includes('customer') || lower.includes('support') || lower.includes('churn') || lower.includes('client') || lower.includes('ticket') || lower.includes('sla') || lower.includes('complaint')) {
+        return {
+          choice: "Customer Escalation & Priority Routing",
+          choiceBar: "95.2%",
+          choiceDesc: "Confidence: 95.2% (SLA Escalation)",
+          noul: "YES (Escalate to Leadership)",
+          noulBar: "97.8%",
+          noulColor: "#ff5252",
+          noulDesc: "Escalation Probability: 0.978",
+          score: "0.890 — High Urgency",
+          scoreBar: "89%",
+          scoreColor: "#ffd700",
+          scoreDesc: "Priority Scalar: 0.890"
+        };
+      } else {
+        return {
+          choice: "System Telemetry & Resource Analysis",
+          choiceBar: "94.6%",
+          choiceDesc: "Confidence: 94.6% (Top Category)",
+          noul: "YES (Trigger Operational Alert)",
+          noulBar: "97.2%",
+          noulColor: "#ff5252",
+          noulDesc: "Alert Probability: 0.972",
+          score: "0.840 — High Priority",
+          scoreBar: "84%",
+          scoreColor: "#ffd700",
+          scoreDesc: "Severity Scalar: 0.840"
+        };
+      }
+    }
+
     function runSimulation() {
+      if (isComputing) return;
+      isComputing = true;
+
       const btn = document.getElementById('run-btn');
+      btn.disabled = true;
+      btn.style.opacity = '0.75';
       btn.innerHTML = '<span>⚡ Computing Tensors...</span>';
       
-      const s = scenarios[currentScenario];
+      const inputVal = (document.getElementById('sim-input').value || '').trim();
+      let s = scenarios[currentScenario];
+      
+      // If user typed custom input distinct from the current preset, run heuristic inference
+      if (inputVal && inputVal !== scenarios[currentScenario]?.text) {
+        s = evaluateCustomInput(inputVal);
+        document.querySelectorAll('.scenario-btn').forEach(b => b.classList.remove('active'));
+      }
+
       setTimeout(() => {
-        const ms = (20 + Math.random() * 4).toFixed(1);
+        const ms = (19 + Math.random() * 5).toFixed(1);
         document.getElementById('latency-val').innerText = ms + ' ms';
         
         document.getElementById('choice-val').innerText = s.choice;
@@ -829,11 +926,14 @@
         document.getElementById('score-bar').style.background = s.scoreColor;
         document.getElementById('score-desc').innerText = s.scoreDesc;
 
+        btn.disabled = false;
+        btn.style.opacity = '1';
         btn.innerHTML = '<span>⚡ Execute Single Forward Pass</span>';
+        isComputing = false;
       }, 120);
     }
 
-    // Init
+    // Initialize with first scenario
     setScenario(0);
   </script>
 </body>