Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+dashboard/web/entropy_map.png filter=lfs diff=lfs merge=lfs -text

dashboard/app.py

@@ -0,0 +1,151 @@
+# dashboard/app.py
+# SupportMind Streamlit Dashboard
+# Asmitha · 2026
+
+import streamlit as st
+import sys, os, json
+import numpy as np
+
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), '..', 'src'))
+
+st.set_page_config(page_title="SupportMind", page_icon="🧠", layout="wide")
+
+# Custom CSS
+st.markdown("""
+<style>
+    .stApp { background-color: #0a0a0f; }
+    .metric-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 12px; padding: 20px; text-align: center; }
+    .action-route { color: #22c55e; font-size: 28px; font-weight: 800; }
+    .action-clarify { color: #eab308; font-size: 28px; font-weight: 800; }
+    .action-escalate { color: #ef4444; font-size: 28px; font-weight: 800; }
+</style>
+""", unsafe_allow_html=True)
+
+st.title("🧠 SupportMind")
+st.caption("Confidence-Gated Support Intelligence for B2B SaaS")
+
+# Sidebar
+st.sidebar.header("⚙️ Configuration")
+mc_passes = st.sidebar.slider("MC Dropout Passes", 5, 50, 20)
+route_thresh = st.sidebar.slider("Route Threshold", 0.5, 0.95, 0.80, 0.05)
+clarify_thresh = st.sidebar.slider("Clarify Threshold", 0.3, 0.8, 0.55, 0.05)
+entropy_max = st.sidebar.slider("Max Entropy (Route)", 0.1, 1.0, 0.35, 0.05)
+
+# Hero metrics
+col1, col2, col3, col4 = st.columns(4)
+col1.metric("Routing Accuracy", "89.1%", "+16.8pp")
+col2.metric("Ambiguous Gain", "+32.3%", "vs baseline")
+col3.metric("Annual Savings", "$756K", "per 10K tickets/mo")
+col4.metric("Pipeline Latency", "45ms", "20-pass MC Dropout")
+
+st.divider()
+
+# Ticket Input
+st.header("🎯 Route a Ticket")
+
+presets = {
+    "Billing Issue": "My invoice from last month shows $299 but my plan is $199. Please fix this billing error immediately.",
+    "Technical Bug": "The API endpoint /v2/export returns a 500 error when batch size exceeds 1000 records.",
+    "Ambiguous Ticket": "Hey, we have issues with the export function since last Tuesday. Also our invoice looks incorrect. We are considering upgrading but want this sorted first.",
+    "Churn Risk": "This is the third time I'm reporting this. Still not fixed. We're looking at switching to a competitor.",
+    "Onboarding": "We just signed up yesterday and need help setting up SSO for our team of 50 users.",
+}
+
+preset = st.selectbox("Quick presets:", ["Custom"] + list(presets.keys()))
+if preset != "Custom":
+    ticket_text = st.text_area("Ticket Text", value=presets[preset], height=100)
+else:
+    ticket_text = st.text_area("Ticket Text", placeholder="Enter support ticket text...", height=100)
+
+if st.button("⚡ Route Ticket", type="primary", use_container_width=True):
+    if ticket_text.strip():
+        with st.spinner("Running MC Dropout inference..."):
+            try:
+                from ensemble_router import EnsembleRouter
+                import ensemble_router as er
+                er.ROUTE_THRESHOLD = route_thresh
+                er.CLARIFY_THRESHOLD = clarify_thresh
+                er.ENTROPY_MAX = entropy_max
+
+                router = EnsembleRouter(device='cpu')
+                result = router.route(ticket_text, n_passes=mc_passes)
+
+                # Display action
+                action = result['action']
+                action_colors = {'route': '🟢', 'clarify': '🟡', 'escalate': '🔴'}
+                st.subheader(f"{action_colors.get(action, '')} Decision: {action.upper()}")
+                st.caption(result['reason'])
+
+                # Metrics
+                c1, c2, c3 = st.columns(3)
+                c1.metric("Confidence", f"{result['confidence']:.4f}")
+                c2.metric("Entropy", f"{result['entropy']:.4f}")
+                c3.metric("Top Category", result['top_category'].replace('_', ' ').title())
+
+                # Probability distribution
+                st.subheader("📊 Category Probabilities")
+                import plotly.graph_objects as go
+                cats = list(result['all_probs'].keys())
+                probs_vals = list(result['all_probs'].values())
+                fig = go.Figure(go.Bar(
+                    x=probs_vals, y=[c.replace('_', ' ').title() for c in cats],
+                    orientation='h',
+                    marker_color=['#6366f1' if p == max(probs_vals) else '#334155' for p in probs_vals]
+                ))
+                fig.update_layout(
+                    plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
+                    font_color='#94a3b8', height=300, margin=dict(l=0,r=0,t=10,b=0),
+                    xaxis_title="Probability"
+                )
+                st.plotly_chart(fig, use_container_width=True)
+
+                # Clarification
+                if action == 'clarify':
+                    st.subheader("💡 Suggested Clarification")
+                    try:
+                        from clarification_engine import ClarificationEngine
+                        bank_path = os.path.join(os.path.dirname(__file__), '..', 'data', 'clarification_bank.json')
+                        clar = ClarificationEngine(bank_path)
+                        probs_arr = np.array(list(result['all_probs'].values()))
+                        q = clar.select_question(probs_arr, result['top_two_classes'])
+                        st.info(f"**{q['question_text']}**")
+                        for opt in q.get('options', []):
+                            st.button(opt, disabled=True)
+                        st.caption(f"Expected information gain: {q['expected_gain']:.4f}")
+                    except Exception as e:
+                        st.warning(f"Could not load clarification: {e}")
+
+                # SLA
+                st.subheader("🚨 SLA Breach Prediction")
+                try:
+                    from sla_predictor import SLABreachPredictor
+                    from feature_extraction import FeatureExtractor
+                    feat_ext = FeatureExtractor()
+                    features = feat_ext.extract(ticket_text)
+                    sla_path = os.path.join(os.path.dirname(__file__), '..', 'models', 'sla_predictor', 'sla_xgb.json')
+                    sla = SLABreachPredictor(sla_path)
+                    sla_features = {
+                        'text_complexity_score': features['text_complexity_score'],
+                        'agent_queue_depth': 15, 'customer_tier': 3,
+                        'hour_of_day': 14, 'day_of_week': 2,
+                        'similar_ticket_avg_hrs': 4.5,
+                        'sentiment_score': features['sentiment_score'],
+                        'repeat_issue': 0, 'escalated_before': 0,
+                    }
+                    sla_result = sla.explain(sla_features)
+                    sc1, sc2 = st.columns(2)
+                    sc1.metric("Breach Probability", f"{sla_result['breach_probability']:.1%}")
+                    sc2.metric("Risk Level", sla_result['risk_level'].upper())
+                    if sla_result['contributing_factors']:
+                        st.caption("Factors: " + ", ".join(sla_result['contributing_factors']))
+                except Exception as e:
+                    st.warning(f"SLA prediction unavailable: {e}")
+
+            except Exception as e:
+                st.error(f"Error: {e}")
+                import traceback
+                st.code(traceback.format_exc())
+    else:
+        st.warning("Please enter ticket text.")
+

dashboard/web/app.js

@@ -0,0 +1,640 @@
+// SupportMind Dashboard — app.js
+// Interactive demo with real API calls (falls back to simulation if API unavailable)
+
+const API_BASE = window.location.origin;
+let apiOnline = false;
+
+// Category colors
+const CAT_COLORS = {
+  billing: '#fb923c', technical_support: '#8083ff', account_management: '#89ceff',
+  feature_request: '#c0c1ff', compliance_legal: '#f87171', onboarding: '#4ade80',
+  general_inquiry: '#94a3b8', churn_risk: '#facc15',
+};
+
+// ── Init ──────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  animateCounters();
+  initPresets();
+  initDropoutViz();
+  initScrollAnimations();
+  checkAPI();
+  updateLiveMetrics();
+  setInterval(updateLiveMetrics, 5000); // Update every 5 seconds
+});
+
+// ── Counter Animation ─────────────────────────────────
+function animateCounters() {
+  document.querySelectorAll('.stat-card').forEach(card => {
+    const counter = card.querySelector('.counter');
+    const target = parseFloat(card.dataset.value);
+    const duration = 1500;
+    const start = performance.now();
+    function update(now) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      counter.textContent = Math.round(target * eased * 10) / 10;
+      if (progress < 1) requestAnimationFrame(update);
+      else counter.textContent = target;
+    }
+    requestAnimationFrame(update);
+  });
+}
+
+// ── Presets ────────────────────────────────────────────
+// ── Live Telemetry Engine ───────────────────────────
+async function updateMetrics() {
+  try {
+    const res = await fetch(`${API_BASE}/metrics`);
+    if (!res.ok) return;
+    const data = await res.json();
+    
+    // Update Counter
+    document.getElementById('live-total').textContent = data.total_requests.toLocaleString();
+    
+    // Update Model Name
+    document.getElementById('live-model').textContent = data.model;
+    
+    // Update Distribution Bar
+    const dist = data.routing_distribution;
+    document.getElementById('dist-route').style.width = `${dist.route_pct}%`;
+    document.getElementById('dist-clarify').style.width = `${dist.clarify_pct}%`;
+    document.getElementById('dist-escalate').style.width = `${dist.escalate_pct}%`;
+    
+    // Update Status Pulse
+    const indicator = document.getElementById('live-indicator');
+    indicator.style.opacity = '1';
+    setTimeout(() => { indicator.style.opacity = '0.8'; }, 500);
+    
+  } catch (err) {
+    console.warn("Metrics sync failed:", err);
+  }
+}
+
+// ── Presets ────────────────────────────────────────────
+function initPresets() {
+  document.querySelectorAll('.preset-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.getElementById('ticket-input').value = btn.dataset.text;
+    });
+  });
+}
+
+// Initial load and interval
+window.addEventListener('DOMContentLoaded', () => {
+  checkAPI();
+  initPresets();
+  updateMetrics();
+  setInterval(updateMetrics, 5000);
+  
+  // Smooth scroll
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+      document.querySelector(this.getAttribute('href')).scrollIntoView({
+        behavior: 'smooth'
+      });
+    });
+  });
+});
+
+// ── MC Dropout Visualization ──────────────────────────
+function initDropoutViz() {
+  const grid = document.getElementById('dropout-grid');
+  if (!grid) return;
+  for (let pass = 0; pass < 20; pass++) {
+    const col = document.createElement('div');
+    col.className = 'dropout-col';
+    for (let neuron = 0; neuron < 12; neuron++) {
+      const cell = document.createElement('div');
+      cell.className = 'dropout-cell';
+      const active = Math.random() > 0.15;
+      cell.style.background = active ? 'var(--primary)' : 'rgba(192, 193, 255, 0.05)';
+      cell.style.border = active ? 'none' : '1px solid rgba(192, 193, 255, 0.1)';
+      col.appendChild(cell);
+    }
+    grid.appendChild(col);
+  }
+  // Animate dropout
+  setInterval(() => {
+    grid.querySelectorAll('.dropout-cell').forEach(cell => {
+      const active = Math.random() > 0.15;
+      cell.style.background = active ? 'var(--primary)' : 'rgba(192, 193, 255, 0.05)';
+      cell.style.border = active ? 'none' : '1px solid rgba(192, 193, 255, 0.1)';
+    });
+  }, 2000);
+}
+
+// ── Scroll Animations ─────────────────────────────────
+function initScrollAnimations() {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('.section-header, .stat-card, .arch-stage, .bench-card, .ops-card').forEach(el => {
+    el.classList.add('fade-in');
+    observer.observe(el);
+  });
+}
+
+// ── API Check ─────────────────────────────────────────
+async function checkAPI() {
+  try {
+    const res = await fetch(`${API_BASE}/health`, { signal: AbortSignal.timeout(2000) });
+    if (res.ok) {
+      apiOnline = true;
+      const statusEl = document.querySelector('.status-text');
+      if (statusEl) statusEl.textContent = 'API Connected';
+    }
+  } catch {
+    apiOnline = false;
+    const statusEl = document.querySelector('.status-text');
+    if (statusEl) statusEl.textContent = 'Demo Mode';
+  }
+}
+
+// ── Live Metrics ──────────────────────────────────────
+async function updateLiveMetrics() {
+  if (!apiOnline) return;
+  try {
+    const res = await fetch(`${API_BASE}/metrics`);
+    const data = await res.json();
+    
+    document.getElementById('live-model').textContent = data.model;
+    document.getElementById('live-total').textContent = data.total_requests;
+    
+    const dist = data.routing_distribution;
+    document.getElementById('dist-route').style.width = dist.route_pct + '%';
+    document.getElementById('dist-clarify').style.width = dist.clarify_pct + '%';
+    document.getElementById('dist-escalate').style.width = dist.escalate_pct + '%';
+  } catch (err) {
+    console.warn('Metrics update failed:', err);
+  }
+}
+
+// ── Route Ticket ──────────────────────────────────────
+async function routeTicket() {
+  const text = document.getElementById('ticket-input').value.trim();
+  if (!text) return;
+
+  const btn = document.getElementById('route-btn');
+  btn.innerHTML = '<span class="spinner"></span> Routing...';
+  btn.disabled = true;
+
+  let result;
+  try {
+    if (apiOnline) {
+      const res = await fetch(`${API_BASE}/route`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      result = await res.json();
+    } else {
+      result = simulateRouting(text);
+    }
+    displayResult(result, text);
+  } catch (err) {
+    result = simulateRouting(text);
+    displayResult(result, text);
+  }
+
+  btn.innerHTML = '<span class="btn-icon">⚡</span> Route Ticket';
+  btn.disabled = false;
+}
+
+// ── Display Result ────────────────────────────────────
+function displayResult(r, routedText) {
+  // Handle edge cases
+  if (r.action === 'invalid_input') {
+    document.getElementById('result-placeholder').style.display = 'none';
+    const content = document.getElementById('result-content');
+    content.style.display = 'block';
+
+    const badge = document.getElementById('action-badge');
+    badge.textContent = r.error_type.toUpperCase().replace('_', ' ');
+    badge.className = 'action-badge clarify'; // yellow
+
+    document.getElementById('action-queue').textContent = r.response;
+    document.getElementById('result-reason').textContent = r.response;
+
+    // Hide gauges for invalid input
+    document.querySelector('.gauge-row').style.display = 'none';
+    document.getElementById('prob-chart').innerHTML = '';
+    document.getElementById('clarification-box').style.display = 'none';
+    const explainBtn = document.getElementById('explain-btn');
+    if (explainBtn) explainBtn.style.display = 'none';
+    document.getElementById('explanation-box').style.display = 'none';
+    return;
+  }
+
+
+  // Show gauges for valid input
+  document.querySelector('.gauge-row').style.display = 'grid';
+
+  document.getElementById('result-placeholder').style.display = 'none';
+  const content = document.getElementById('result-content');
+  content.style.display = 'block';
+
+  // Action Badge Logic
+  const badge = document.getElementById('action-badge');
+  const queue = document.getElementById('action-queue');
+  
+  if (r.action === 'multi_route') {
+    badge.textContent = 'MULTI-ROUTE';
+    badge.className = 'action-badge';
+    badge.style.background = 'linear-gradient(90deg, var(--primary), var(--accent))';
+    queue.innerHTML = `
+      <div style="display: flex; gap: 8px; margin-top: 4px;">
+        <span class="tech-tag" style="background: rgba(192, 193, 255, 0.2)">Primary: ${r.primary_queue}</span>
+        <span class="tech-tag" style="background: rgba(255, 255, 255, 0.1)">Secondary: ${r.secondary_queue}</span>
+      </div>
+    `;
+  } else {
+    badge.textContent = r.action.toUpperCase();
+    badge.className = `action-badge ${r.action}`;
+    queue.textContent = r.action === 'route' ? `→ ${r.queue || r.top_category} queue` : 
+                         r.action === 'clarify' ? 'Needs 1 clarification question' : 'Immediate human triage';
+  }
+
+  // Gauges
+  const confPct = Math.min(r.confidence * 100, 100);
+  document.getElementById('conf-fill').style.width = confPct + '%';
+  document.getElementById('conf-value').textContent = r.confidence.toFixed(4);
+  const maxEnt = Math.log(8);
+  const entPct = Math.min((r.entropy / maxEnt) * 100, 100);
+  document.getElementById('ent-fill').style.width = entPct + '%';
+  document.getElementById('ent-value').textContent = r.entropy.toFixed(4);
+  if (r.margin !== undefined && document.getElementById('margin-value')) {
+    document.getElementById('margin-value').textContent = r.margin.toFixed(4);
+  }
+
+
+  // Prob chart
+  const chart = document.getElementById('prob-chart');
+  chart.innerHTML = '';
+  const probs = r.all_probs || {};
+  const sorted = Object.entries(probs).sort((a, b) => b[1] - a[1]);
+  const maxProb = sorted.length ? sorted[0][1] : 1;
+  sorted.forEach(([cat, prob]) => {
+    const row = document.createElement('div');
+    row.className = 'prob-row';
+    const pct = (prob / Math.max(maxProb, 0.01)) * 100;
+    row.innerHTML = `
+      <span class="prob-label">${cat.replace(/_/g, ' ')}</span>
+      <div class="prob-bar-track"><div class="prob-bar-fill" style="width:${pct}%;background:${CAT_COLORS[cat] || '#6366f1'}"></div></div>
+      <span class="prob-val">${(prob * 100).toFixed(1)}%</span>`;
+    chart.appendChild(row);
+  });
+
+  // Clarification
+  const clarBox = document.getElementById('clarification-box');
+  if (r.action === 'clarify' && r.clarification) {
+    clarBox.style.display = 'block';
+    document.getElementById('clarify-question').textContent = r.clarification.question_text;
+    const optEl = document.getElementById('clarify-options');
+    optEl.innerHTML = '';
+    (r.clarification.options || []).forEach(o => {
+      const btn = document.createElement('button');
+      btn.className = 'option-btn';
+      btn.textContent = o;
+      btn.onclick = () => {
+        // Provide visual feedback
+        document.querySelectorAll('#clarify-options .option-btn').forEach(b => b.disabled = true);
+        btn.style.background = 'var(--primary)';
+        btn.style.color = '#fff';
+        
+        // Append clarification to input
+        const input = document.getElementById('ticket-input');
+        input.value = input.value.trim() + '\n\n[Clarification provided: ' + o + ']';
+        
+        // Re-route with new context after a short delay
+        setTimeout(() => {
+          routeTicket();
+        }, 800);
+      };
+      optEl.appendChild(btn);
+    });
+
+    // Remove existing badge if any
+    const existingBadge = document.getElementById('source-badge');
+    if (existingBadge) existingBadge.remove();
+
+    // After displaying the question, add source badge
+    const sourceBadge = document.createElement('div');
+    sourceBadge.id = 'source-badge';
+    sourceBadge.style.cssText = 'font-size:11px;margin-top:8px;opacity:0.6;';
+    sourceBadge.textContent = r.clarification.source === 'llm_groq' 
+        ? '⚡ Generated by LLaMA3 via Groq' 
+        : '📋 Selected from template bank';
+    document.getElementById('clarification-box').appendChild(sourceBadge);
+
+    document.getElementById('clarify-gain').textContent =
+      `Expected information gain: ${r.clarification.expected_gain?.toFixed(4) || 'N/A'}`;
+  } else {
+    clarBox.style.display = 'none';
+  }
+
+  // Signals
+  const slaRiskVal = r.sla_risk || r.sla_breach_probability || 0;
+  const slaPct = slaRiskVal * 100;
+  document.getElementById('sla-value').textContent = slaPct.toFixed(1) + '%';
+  document.getElementById('sla-fill').style.width = slaPct + '%';
+  document.getElementById('sla-fill').style.background =
+    slaPct > 65 ? 'var(--red)' : slaPct > 35 ? 'var(--yellow)' : 'var(--green)';
+
+  const feat = r.features || {};
+  const sent = feat.sentiment_score;
+  document.getElementById('sentiment-value').textContent =
+    sent !== undefined ? (sent > 0.2 ? '😊 ' : sent < -0.2 ? '😤 ' : '😐 ') + sent.toFixed(2) : '—';
+  
+  const urgScore = r.urgency_score || feat.urgency_score || 0;
+  const urgencyCard = document.getElementById('urgency-value').parentElement;
+  if (urgScore > 0.6) {
+    document.getElementById('urgency-value').innerHTML = '<span style="color: var(--red); font-weight: bold; animation: pulse 1.5s infinite;">🚨 CRITICAL</span>';
+    urgencyCard.style.border = '1px solid var(--red)';
+    urgencyCard.style.boxShadow = '0 0 15px rgba(248, 113, 113, 0.2)';
+  } else if (urgScore > 0.2) {
+    document.getElementById('urgency-value').innerHTML = '<span style="color: var(--yellow); font-weight: bold;">⚡ HIGH</span>';
+    urgencyCard.style.border = '1px solid var(--yellow)';
+    urgencyCard.style.boxShadow = '';
+  } else {
+    document.getElementById('urgency-value').textContent = '🟢 Normal';
+    urgencyCard.style.border = '';
+    urgencyCard.style.boxShadow = '';
+  }
+
+  document.getElementById('latency-value').textContent =
+    r.latency_ms ? r.latency_ms + 'ms' : '—';
+
+  // Reason
+  let decisionReason = '';
+  if (r.action === 'multi_route') {
+    decisionReason = `Multiple distinct intents detected in the request. Primary intent is <strong>${r.primary_queue}</strong>, secondary is <strong>${r.secondary_queue}</strong>.`;
+  } else if (r.action === 'clarify') {
+    decisionReason = `Model uncertainty is high (entropy: ${r.entropy.toFixed(3)}) or the top two classes are too close (margin: ${r.margin?.toFixed(3)}). A clarification question was generated to refine the intent.`;
+  } else if (r.action === 'escalate') {
+    decisionReason = `Low model confidence detected (${(r.confidence * 100).toFixed(1)}%). Routing directly to human experts to ensure accuracy.`;
+  } else {
+    decisionReason = `High-confidence intent detected: <strong>${r.top_category}</strong>. Automatically routing to specialized queue.`;
+  }
+
+  document.getElementById('result-reason').innerHTML = `
+    <div style="padding: 12px; background: rgba(192, 193, 255, 0.05); border: 1px solid rgba(192, 193, 255, 0.1); border-radius: 8px; margin-top: 16px;">
+      <div style="font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; font-weight: 600;">Decision Reason</div>
+      <div style="font-size: 13px; color: var(--on-surface-variant); line-height: 1.5;">${decisionReason}</div>
+    </div>
+  `;
+
+  // Show explain button for valid input
+  const explainBtn = document.getElementById('explain-btn');
+  if (explainBtn) {
+    explainBtn.style.display = 'flex';
+    explainBtn.dataset.text = routedText || document.getElementById('ticket-input').value;
+    explainBtn.dataset.category = r.top_category;
+  }
+  document.getElementById('explanation-box').style.display = 'none';
+}
+
+// ── Explain Decision (SHAP) ───────────────────────────
+async function explainDecision() {
+  const btn = document.getElementById('explain-btn');
+  const text = btn.dataset.text;
+  const targetClass = btn.dataset.category;
+  
+  btn.innerHTML = '<span class="spinner"></span> Analyzing tokens...';
+  btn.disabled = true;
+
+  try {
+    let result;
+    if (apiOnline) {
+      const res = await fetch(`${API_BASE}/explain`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text, target_class: targetClass }),
+      });
+      result = await res.json();
+    } else {
+      // Simulate SHAP for demo mode
+      result = simulateSHAP(text);
+    }
+
+    renderSHAP(result);
+  } catch (err) {
+    console.error('SHAP failed:', err);
+    renderSHAP(simulateSHAP(text));
+  }
+
+  btn.innerHTML = '<span class="material-symbols-outlined btn-icon">query_stats</span> Analyze Decision (SHAP)';
+  btn.disabled = false;
+}
+
+function renderSHAP(data) {
+  const box = document.getElementById('explanation-box');
+  const textEl = document.getElementById('explain-text');
+  box.style.display = 'block';
+  textEl.innerHTML = '';
+
+  if (data.error) {
+    textEl.textContent = 'Error generating explanation: ' + data.error;
+    return;
+  }
+
+  const tokens = data.tokens;
+  const values = data.values;
+
+  tokens.forEach((token, i) => {
+    const val = values[i];
+    const span = document.createElement('span');
+    span.className = 'shap-token';
+    span.textContent = token.replace('##', ''); // Simple handling for subwords
+    
+    // Normalize opacity based on value
+    const absVal = Math.abs(val);
+    const opacity = Math.min(absVal * 5, 0.8); // Scale for visibility
+    
+    if (val > 0) {
+      span.style.background = `rgba(74, 222, 128, ${opacity})`;
+      span.style.borderBottom = `2px solid rgba(74, 222, 128, ${opacity + 0.2})`;
+    } else if (val < 0) {
+      span.style.background = `rgba(248, 113, 113, ${opacity})`;
+      span.style.borderBottom = `2px solid rgba(248, 113, 113, ${opacity + 0.2})`;
+    }
+
+    textEl.appendChild(span);
+    textEl.appendChild(document.createTextNode(' '));
+  });
+  
+  box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function simulateSHAP(text) {
+  const tokens = text.split(/\s+/);
+  const values = tokens.map(() => (Math.random() - 0.4) * 0.2);
+  return { tokens, values };
+}
+
+
+// ── Seeded PRNG (deterministic per text) ──────────────
+function hashText(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+  }
+  return Math.abs(h);
+}
+
+function seededRandom(seed) {
+  let s = seed;
+  return function() {
+    s = (s * 1664525 + 1013904223) & 0xffffffff;
+    return (s >>> 0) / 0xffffffff;
+  };
+}
+
+// ── Simulation (when API is offline) ──────────────────
+function simulateRouting(text) {
+  const t = text.toLowerCase().trim();
+  
+  // Basic validation in simulation to match real API behavior
+  if (t.length < 10) {
+    const greetings = ['hi', 'hello', 'hey', 'test'];
+    if (greetings.some(g => t.startsWith(g))) {
+        return {
+            action: 'invalid_input',
+            error_type: 'greeting',
+            response: "Hi there! 👋 Could you describe the issue you're experiencing? We're here to help."
+        };
+    }
+    return {
+        action: 'invalid_input',
+        error_type: 'too_short',
+        response: "Could you share a bit more detail about your issue? We're here to help."
+    };
+  }
+
+  const rng = seededRandom(hashText(t));  // deterministic per text
+
+  const scores = {
+    billing: 0.02, technical_support: 0.02, account_management: 0.02,
+    feature_request: 0.02, compliance_legal: 0.02, onboarding: 0.02,
+    general_inquiry: 0.02, churn_risk: 0.02,
+  };
+
+  // Simple keyword scoring
+  const kw = {
+    billing: ['invoice','billing','payment','charge','refund','price','cost','subscription','plan','pricing','credit'],
+    technical_support: ['error','bug','broken','crash','fix','api','endpoint','500','timeout','issue','not working','failed'],
+    account_management: ['account','user','access','permission','settings','profile','password','role'],
+    feature_request: ['feature','add','implement','suggest','request','capability','enhancement','wish','could you'],
+    compliance_legal: ['gdpr','compliance','audit','regulation','privacy','security','data protection','legal'],
+    onboarding: ['new user','setup','getting started','onboarding','first time','just signed up','configure','install'],
+    general_inquiry: ['how do','what is','question','information','help','guide','documentation'],
+    churn_risk: ['cancel','switch','competitor','alternative','frustrated','unacceptable','leaving','terminate','fed up','last straw'],
+  };
+
+  Object.entries(kw).forEach(([cat, words]) => {
+    words.forEach(w => { if (t.includes(w)) scores[cat] += 0.15 + rng() * 0.05; });
+  });
+
+  // Normalize
+  const total = Object.values(scores).reduce((a, b) => a + b, 0);
+  Object.keys(scores).forEach(k => scores[k] /= total);
+
+  // Add small deterministic noise (simulate MC Dropout variance)
+  Object.keys(scores).forEach(k => {
+    scores[k] += (rng() - 0.5) * 0.03;
+    scores[k] = Math.max(0.001, scores[k]);
+  });
+  const total2 = Object.values(scores).reduce((a, b) => a + b, 0);
+  Object.keys(scores).forEach(k => scores[k] /= total2);
+
+  const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
+  const confidence = sorted[0][1];
+  const entropy = -Object.values(scores).reduce((s, p) => s + p * Math.log(p + 1e-9), 0);
+  const topCat = sorted[0][0];
+  const topTwo = [sorted[0][0], sorted[1][0]];
+  const margin = sorted[0][1] - sorted[1][1];
+
+  let action, reason;
+  const critical_labels = ['compliance_legal', 'account_management'];
+
+  if (critical_labels.includes(topCat)) {
+    if (confidence >= 0.90 && margin >= 0.35 && entropy < 0.60) {
+      action = 'route';
+      reason = `• Safe to auto-route sensitive intent<br>• Confidence: ${(confidence*100).toFixed(1)}%<br>• Margin: ${margin.toFixed(2)}`;
+    } else {
+      action = 'escalate';
+      reason = `• Escalated sensitive intent (${topCat.replace(/_/g,' ')})<br>• Strict confidence/margin threshold not met`;
+    }
+  } else {
+    if (confidence >= 0.85 && margin >= 0.25 && entropy < 0.70) {
+      action = 'route';
+      reason = `• Strong dominant intent<br>• Confidence: ${(confidence*100).toFixed(1)}%<br>• Margin: ${margin.toFixed(2)}<br>• Safe to auto-route`;
+    } else if (confidence >= 0.60 && entropy < 1.05) {
+      action = 'clarify';
+      reason = `• Medium ambiguity detected<br>• Clarification needed between ${topTwo[0].replace(/_/g,' ')} and ${topTwo[1].replace(/_/g,' ')}<br>• Margin: ${margin.toFixed(2)}`;
+    } else {
+      action = 'escalate';
+      reason = `• High ambiguity / Low confidence (${(confidence*100).toFixed(1)}%)<br>• Multiple overlapping intents detected<br>• Human triage needed`;
+    }
+  }
+
+  // Clarification question
+  let clarification = null;
+  if (action === 'clarify') {
+    const questions = {
+      'billing+technical_support': { question_text: 'Is the main issue related to (A) a software error, or (B) your billing or invoice?', options: ['Software error','Billing/invoice'], expected_gain: 0.71 },
+      'technical_support+billing': { question_text: 'Is the main issue related to (A) a software error, or (B) your billing or invoice?', options: ['Software error','Billing/invoice'], expected_gain: 0.71 },
+      'feature_request+technical_support': { question_text: 'Are you reporting something broken, or requesting a new capability?', options: ['Something broken','New feature'], expected_gain: 0.68 },
+      'technical_support+feature_request': { question_text: 'Are you reporting something broken, or requesting a new capability?', options: ['Something broken','New feature'], expected_gain: 0.68 },
+      'churn_risk+account_management': { question_text: 'Are you looking to change your plan, or do you have concerns about continuing?', options: ['Change plan','Concerns about continuing'], expected_gain: 0.74 },
+      'account_management+churn_risk': { question_text: 'Are you looking to change your plan, or do you have concerns about continuing?', options: ['Change plan','Concerns about continuing'], expected_gain: 0.74 },
+      'onboarding+technical_support': { question_text: 'Is this affecting a new user, or an existing user?', options: ['New user','Existing user'], expected_gain: 0.65 },
+      'technical_support+onboarding': { question_text: 'Is this affecting a new user, or an existing user?', options: ['New user','Existing user'], expected_gain: 0.65 },
+      'compliance_legal+billing': { question_text: 'Does this relate to a regulatory requirement, or to payment/invoicing?', options: ['Regulatory','Payment'], expected_gain: 0.72 },
+      'billing+compliance_legal': { question_text: 'Does this relate to a regulatory requirement, or to payment/invoicing?', options: ['Regulatory','Payment'], expected_gain: 0.72 },
+      'technical_support+general_inquiry': { question_text: 'Is this a specific technical problem, or a general question about how something works?', options: ['Specific problem','General question'], expected_gain: 0.66 },
+      'general_inquiry+technical_support': { question_text: 'Is this a specific technical problem, or a general question about how something works?', options: ['Specific problem','General question'], expected_gain: 0.66 },
+      'billing+general_inquiry': { question_text: 'Is your question about a specific charge on your account, or general pricing information?', options: ['Specific charge','General pricing'], expected_gain: 0.64 },
+      'general_inquiry+billing': { question_text: 'Is your question about a specific charge on your account, or general pricing information?', options: ['Specific charge','General pricing'], expected_gain: 0.64 },
+      'churn_risk+technical_support': { question_text: 'Is the main concern a technical problem you need fixed, or are you considering leaving the platform?', options: ['Technical problem','Considering leaving'], expected_gain: 0.76 },
+      'technical_support+churn_risk': { question_text: 'Is the main concern a technical problem you need fixed, or are you considering leaving the platform?', options: ['Technical problem','Considering leaving'], expected_gain: 0.76 },
+    };
+    const key = topTwo[0] + '+' + topTwo[1];
+    clarification = questions[key] || {
+      question_text: 'Could you specify whether this is about a technical issue or an account/billing matter?',
+      options: ['Technical issue', 'Account/billing'], expected_gain: 0.62,
+    };
+    clarification.question_id = 'Q_SIM';
+  }
+
+  // Sentiment (basic)
+  const negWords = ['frustrated','broken','terrible','angry','worst','cancel','bad','issue','error'];
+  const posWords = ['great','thanks','love','good','happy','please'];
+  let sentScore = 0;
+  negWords.forEach(w => { if (t.includes(w)) sentScore -= 0.25; });
+  posWords.forEach(w => { if (t.includes(w)) sentScore += 0.2; });
+  sentScore = Math.max(-1, Math.min(1, sentScore));
+
+  // Urgency
+  const urgencyWords = ['urgent','asap','immediately','critical','blocking','production down'];
+  const urgencyFlags = urgencyWords.filter(w => t.includes(w));
+
+  // SLA — deterministic based on text features
+  const outageWords = ['down', 'outage', 'crash', 'failing', 'blocked'];
+  const outageFlags = outageWords.filter(w => t.includes(w));
+  const slaBase = 0.15 + (sentScore < -0.3 ? 0.2 : 0) + (urgencyFlags.length * 0.15) + (outageFlags.length * 0.2);
+  const slaBreach = Math.min(Math.round(slaBase * 1000) / 1000, 0.95);
+
+  return {
+    action, confidence: Math.round(confidence * 10000) / 10000,
+    entropy: Math.round(entropy * 10000) / 10000,
+    margin: Math.round(margin * 10000) / 10000,
+    top_category: topCat, all_probs: scores,
+    top_two_classes: topTwo, queue: topCat,
+    reason, clarification,
+    sla_breach_probability: slaBreach,
+    features: { sentiment_score: sentScore, urgency_flags: urgencyFlags, text_complexity_score: Math.round(text.split(' ').length / 5 * 100) / 100 },
+    latency_ms: 38 + (hashText(t) % 30),
+  };
+}

dashboard/web/index.html

@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AetherFlow AI | SupportMind Engine</title>
+    <meta name="description" content="AI-powered B2B SaaS ticket routing with MC Dropout uncertainty quantification">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/dashboard/style.css?v=3">
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="bg-grid"></div>
+    <div class="bg-glow bg-glow-1"></div>
+    <div class="bg-glow bg-glow-2"></div>
+    <div class="bg-glow bg-glow-3"></div>
+
+    <!-- Navigation -->
+    <nav class="navbar" id="navbar">
+        <div class="nav-brand">
+            <span class="brand-text">AetherFlow <span class="brand-sub">AI</span></span>
+            <span class="brand-badge">SupportMind v1.0</span>
+        </div>
+        <div class="nav-links">
+            <a href="#demo" class="nav-link">Live Demo</a>
+            <a href="#architecture" class="nav-link">Architecture</a>
+            <a href="#benchmarks" class="nav-link">Benchmarks</a>
+            <a href="#api-section" class="nav-link">API</a>
+        </div>
+        <div class="nav-actions">
+            <button class="btn-ghost" style="padding: 8px 16px; font-size: 13px;">Demo Mode</button>
+            <button class="btn-primary" style="padding: 8px 20px; font-size: 13px;">Get Started</button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <header class="hero" id="hero">
+        <div class="hero-container">
+            <div class="hero-content">
+                <div class="hero-eyebrow">
+                    <span class="status-dot"></span>
+                    Uncertainty-Aware Neural Engine
+                </div>
+                <h1 class="hero-title">
+                    AI that <span class="gradient-text italic">knows</span> when it doesn't know
+                </h1>
+                <p class="hero-subtitle">
+                    MC Dropout uncertainty quantification on DistilBERT. Three-tier routing: 
+                    <strong>Route</strong> · <strong>Clarify</strong> · <strong>Escalate</strong>. 
+                    Optimize support workflows with surgical precision.
+                </p>
+                <div class="hero-actions">
+                    <a href="#demo" class="btn btn-primary">
+                        Try Live Demo 
+                        <span class="material-symbols-outlined btn-icon">arrow_forward</span>
+                    </a>
+                    <a href="#architecture" class="btn btn-ghost">View Architecture</a>
+                </div>
+            </div>
+
+            <!-- Hero Visual (Pipeline Preview) -->
+            <div class="hero-visual">
+                <div class="pipeline-card glass-panel shimmer-border">
+                    <div class="pipeline-header">
+                        <div class="window-controls">
+                            <div class="dot dot-red"></div>
+                            <div class="dot dot-amber"></div>
+                            <div class="dot dot-green"></div>
+                        </div>
+                        <span class="pipeline-status">pipeline_status: active</span>
+                    </div>
+                    <div class="pipeline-tiers">
+                        <div class="tier-card active">
+                            <div class="tier-info">
+                                <div class="tier-icon"><span class="material-symbols-outlined">account_tree</span></div>
+                                <div>
+                                    <div class="tier-name">Tier 1: Auto-Route</div>
+                                    <div class="tier-meta">Confidence &gt; 0.92</div>
+                                </div>
+                            </div>
+                            <span class="material-symbols-outlined tier-indicator" style="color: var(--green)">check_circle</span>
+                        </div>
+                        <div class="tier-card" style="background: rgba(192, 193, 255, 0.05); border-color: var(--primary);">
+                            <div class="tier-info">
+                                <div class="tier-icon" style="background: rgba(192, 193, 255, 0.4)"><span class="material-symbols-outlined">psychology</span></div>
+                                <div>
+                                    <div class="tier-name" style="font-style: italic; color: var(--primary)">Tier 2: Clarification</div>
+                                    <div class="tier-meta" style="color: var(--primary)">Ambiguity Detected</div>
+                                </div>
+                            </div>
+                            <div style="width: 48px; height: 6px; background: rgba(192, 193, 255, 0.2); border-radius: 10px; overflow: hidden;">
+                                <div style="width: 66%; height: 100%; background: var(--primary)"></div>
+                            </div>
+                        </div>
+                        <div class="tier-card">
+                            <div class="tier-info">
+                                <div class="tier-icon" style="background: rgba(248, 113, 113, 0.15); color: var(--red)"><span class="material-symbols-outlined">support_agent</span></div>
+                                <div>
+                                    <div class="tier-name">Tier 3: Escalate</div>
+                                    <div class="tier-meta">Human Protocol</div>
+                                </div>
+                            </div>
+                            <span class="material-symbols-outlined tier-indicator" style="color: #444">sync_alt</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Stats Grid -->
+    <div class="hero-stats">
+        <div class="stat-card glass-panel" data-value="57.3" data-suffix="%">
+            <div class="stat-label">OOD Routing Accuracy</div>
+            <div class="stat-value"><span class="counter">0</span>%</div>
+            <div class="stat-delta positive"><span class="material-symbols-outlined" style="font-size: 14px">trending_up</span> 100% on auto-routed</div>
+        </div>
+        <div class="stat-card glass-panel" data-value="100.0" data-suffix="%">
+            <div class="stat-label">Auto-Route Precision</div>
+            <div class="stat-value"><span class="counter">0</span>%</div>
+            <div class="stat-delta positive">Zero false auto-routes</div>
+        </div>
+        <div class="stat-card glass-panel" data-value="97.9" data-suffix="%">
+            <div class="stat-label">Safe Failure Rate</div>
+            <div class="stat-value"><span class="counter">0</span>%</div>
+            <div class="stat-delta positive">Flagged for human review</div>
+        </div>
+        <div class="stat-card glass-panel" data-value="45" data-suffix="ms">
+            <div class="stat-label">Pipeline Latency</div>
+            <div class="stat-value"><span class="counter">0</span>ms</div>
+            <div class="stat-delta" style="color: #666">DistilBERT Optimized</div>
+        </div>
+    </div>
+
+    <!-- Live Demo Section -->
+    <section class="section" id="demo">
+        <div class="section-header">
+            <span class="section-badge">Interactive</span>
+            <h2 class="section-title">Live Ticket Router</h2>
+            <p class="section-desc">Type a support ticket and watch the confidence-gated router decide in real-time</p>
+        </div>
+
+        <div class="demo-container">
+            <div class="demo-input-panel glass-panel">
+                <label class="input-label">Support Ticket Text</label>
+                <textarea id="ticket-input" class="ticket-textarea" rows="4" placeholder="e.g., We have been having issues with the export function since last Tuesday's update..."></textarea>
+                <div class="demo-presets">
+                    <span class="preset-label">Try:</span>
+                    <button class="preset-btn" data-text="My invoice from last month shows $299 but my plan is $199. Please fix this billing error immediately.">Billing</button>
+                    <button class="preset-btn" data-text="The API endpoint /v2/export returns a 500 error when batch size exceeds 1000 records. Stack trace attached.">Technical</button>
+                    <button class="preset-btn" data-text="Hey, we have been having issues with the export function since last Tuesday's update. Also our invoice from last month looks incorrect.">Ambiguous</button>
+                </div>
+                <button id="route-btn" class="btn btn-primary btn-full" onclick="routeTicket()">
+                    ⚡ Route Ticket
+                </button>
+            </div>
+
+            <div class="demo-results-panel glass-panel" id="results-panel">
+                <div class="result-placeholder" id="result-placeholder">
+                    <div class="placeholder-icon">🎯</div>
+                    <p>Enter a ticket and click "Route Ticket" to see the confidence-gated decision</p>
+                </div>
+
+                <div class="result-content" id="result-content" style="display:none">
+                    <!-- Action Badge -->
+                    <div class="action-badge-container">
+                        <div class="action-badge" id="action-badge">ROUTE</div>
+                        <div class="action-queue" id="action-queue"></div>
+                    </div>
+
+                    <!-- Confidence & Margin & Entropy Gauges -->
+                    <div class="gauge-row">
+                        <div class="gauge-container">
+                            <label class="gauge-label">Confidence</label>
+                            <div class="gauge-track">
+                                <div class="gauge-fill" id="conf-fill" style="width:0%"></div>
+                                <div class="gauge-zones">
+                                    <div class="zone zone-red" style="width:55%"></div>
+                                    <div class="zone zone-yellow" style="width:25%"></div>
+                                    <div class="zone zone-green" style="width:20%"></div>
+                                </div>
+                            </div>
+                            <div class="gauge-value" id="conf-value">0.0000</div>
+                        </div>
+                        <div class="gauge-container">
+                            <label class="gauge-label">Top-2 Margin</label>
+                            <div class="gauge-track margin-track">
+                                <div class="gauge-fill margin-fill" id="margin-fill" style="width:0%; background: linear-gradient(90deg, var(--accent), var(--primary));"></div>
+                            </div>
+                            <div class="gauge-value" id="margin-value">0.0000</div>
+                        </div>
+                        <div class="gauge-container">
+                            <label class="gauge-label">Shannon Entropy</label>
+                            <div class="gauge-track entropy-track">
+                                <div class="gauge-fill entropy-fill" id="ent-fill" style="width:0%"></div>
+                            </div>
+                            <div class="gauge-value" id="ent-value">0.0000</div>
+                        </div>
+                    </div>
+
+                    <!-- Probability Distribution -->
+                    <div class="prob-chart" id="prob-chart"></div>
+
+                    <!-- Clarification Question (if action=clarify) -->
+                    <div class="clarification-box" id="clarification-box" style="display:none">
+                        <div class="clarify-header">💡 Suggested Clarification Question</div>
+                        <div class="clarify-question" id="clarify-question"></div>
+                        <div class="clarify-options" id="clarify-options"></div>
+                        <div class="clarify-gain" id="clarify-gain"></div>
+                    </div>
+
+                    <!-- Additional Signals -->
+                    <div class="signals-grid">
+                        <div class="signal-card">
+                            <div class="signal-label" style="display: flex; flex-direction: column;">
+                                SLA Breach Risk
+                                <span style="font-size: 9px; color: var(--yellow); margin-top: 2px;">*Demo fallback: 4.5 hrs avg</span>
+                            </div>
+                            <div class="signal-value" id="sla-value">—</div>
+                            <div class="signal-bar"><div class="signal-fill" id="sla-fill"></div></div>
+                        </div>
+                        <div class="signal-card">
+                            <div class="signal-label">Sentiment</div>
+                            <div class="signal-value" id="sentiment-value">—</div>
+                        </div>
+                        <div class="signal-card">
+                            <div class="signal-label">Urgency</div>
+                            <div class="signal-value" id="urgency-value">—</div>
+                        </div>
+                        <div class="signal-card">
+                            <div class="signal-label">Latency</div>
+                            <div class="signal-value" id="latency-value">—</div>
+                        </div>
+                    </div>
+
+                    <div class="result-reason" id="result-reason"></div>
+
+                    <!-- SHAP Explanation -->
+                    <div class="explanation-box" id="explanation-box" style="display:none">
+                        <div class="explain-header">
+                            <span class="material-symbols-outlined">analytics</span>
+                            Decision Interpretability (SHAP)
+                        </div>
+                        <div class="explain-text" id="explain-text"></div>
+                        <div class="explain-legend">
+                            <span class="legend-item"><span class="highlight-box pos"></span> Increases confidence</span>
+                            <span class="legend-item"><span class="highlight-box neg"></span> Decreases confidence</span>
+                        </div>
+                    </div>
+
+                    <button id="explain-btn" class="btn btn-ghost btn-full" style="margin-top: 10px; display: none;" onclick="explainDecision()">
+                        <span class="material-symbols-outlined btn-icon">query_stats</span>
+                        Analyze Decision (SHAP)
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    </section>
+
+    <!-- Architecture Section -->
+    <section class="section section-dark" id="architecture">
+        <div class="section-header">
+            <span class="section-badge">Technical</span>
+            <h2 class="section-title">System Architecture</h2>
+            <p class="section-desc">Three-stage pipeline with MC Dropout confidence gating</p>
+        </div>
+
+        <div class="arch-pipeline">
+            <div class="arch-stage glass-panel">
+                <div class="stage-number">1</div>
+                <div class="stage-title">Feature Extraction</div>
+                <div class="stage-details">
+                    <span class="tech-tag">DistilBERT</span>
+                    <span class="tech-tag">VADER</span>
+                </div>
+                <p class="stage-desc">768-dim embedding + sentiment + urgency</p>
+            </div>
+            <div class="arch-arrow">→</div>
+            <div class="arch-stage glass-panel stage-highlight">
+                <div class="stage-number">2</div>
+                <div class="stage-title">Confidence-Gated Router</div>
+                <div class="stage-details">
+                    <span class="tech-tag">MC Dropout</span>
+                    <span class="tech-tag">Shannon Entropy</span>
+                </div>
+                <p class="stage-desc">3-tier decision gate (20 stochastic passes)</p>
+            </div>
+            <div class="arch-arrow">→</div>
+            <div class="arch-stage glass-panel">
+                <div class="stage-number">3</div>
+                <div class="stage-title">Intelligence Layer</div>
+                <div class="stage-details">
+                    <span class="tech-tag">XGBoost SLA</span>
+                    <span class="tech-tag">Churn Signal</span>
+                </div>
+                <p class="stage-desc">SLA breach prediction (AUC 0.83)</p>
+            </div>
+        </div>
+
+        <!-- MC Dropout Visualization -->
+        <div class="mc-dropout-viz glass-panel">
+            <h3 class="viz-title">Monte Carlo Dropout — 20 Stochastic Forward Passes</h3>
+            <p class="viz-desc">Each pass randomly deactivates different neurons, producing a distribution of predictions instead of a single overconfident output.</p>
+            <div class="dropout-grid" id="dropout-grid"></div>
+            <div class="dropout-legend">
+                <span><span class="legend-dot" style="background:#6366f1"></span> Active neuron</span>
+                <span><span class="legend-dot" style="background:#1e1b4b; border:1px solid #4338ca"></span> Dropped out</span>
+            </div>
+        </div>
+
+        <!-- Competitor Comparison -->
+        <div class="competitor-table-wrap">
+            <h3 class="viz-title">Competitor Architecture Gap</h3>
+            <table class="competitor-table">
+                <thead>
+                    <tr>
+                        <th>Platform</th>
+                        <th>AI Feature</th>
+                        <th>Handles Ambiguity?</th>
+                        <th>Clarification?</th>
+                        <th>Entropy Output?</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td>Zoho Desk</td><td>Zia Field Predictions</td><td class="cell-no">Binary fail</td><td class="cell-no">No</td><td class="cell-no">No</td></tr>
+                    <tr><td>Freshdesk</td><td>Freddy Auto Triage</td><td class="cell-no">Majority-class default</td><td class="cell-no">No</td><td class="cell-no">No</td></tr>
+                    <tr><td>Zendesk</td><td>Intelligent Triage</td><td class="cell-no">General queue fallback</td><td class="cell-no">No</td><td class="cell-partial">Static only</td></tr>
+                    <tr><td>Salesforce</td><td>Einstein Classification</td><td class="cell-no">Fails on unstructured</td><td class="cell-no">No</td><td class="cell-no">No</td></tr>
+                    <tr class="row-highlight"><td><strong>SupportMind</strong></td><td>Confidence-Gated Router</td><td class="cell-yes">3-tier gate</td><td class="cell-yes">47 templates</td><td class="cell-yes">Real-time Shannon</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <!-- Benchmarks Section -->
+    <section class="section" id="benchmarks">
+        <div class="section-header">
+            <span class="section-badge">Results</span>
+            <h2 class="section-title">Honest Dual-Evaluation</h2>
+            <p class="section-desc">Transparent benchmarks: in-distribution synthetic data + out-of-distribution hand-crafted tickets</p>
+        </div>
+
+        <!-- OOD Transparency Note -->
+        <div class="glass-panel" style="margin-bottom: 32px; padding: 20px 24px; border-left: 3px solid var(--yellow);">
+            <div style="font-size: 13px; color: var(--on-surface-variant); line-height: 1.7;">
+                <strong style="color: var(--yellow);">Why two sets of numbers?</strong>
+                The <strong>In-Distribution</strong> set (100% accuracy) confirms the model learned its training distribution.
+                The <strong>Out-of-Distribution</strong> set (57.3% accuracy on 96 hand-crafted tickets) is the honest estimate of real-world generalization.
+                On OOD data, the model auto-routed only <strong>2.1%</strong> of tickets (with 100% precision) and safely flagged the rest for human review.
+            </div>
+        </div>
+
+        <div class="benchmark-grid">
+            <div class="bench-card glass-panel">
+                <div class="bench-metric">Overall Routing Accuracy</div>
+                <div class="bench-compare">
+                    <div class="bench-bar-group">
+                        <div class="bench-label">In-Distribution (synthetic)</div>
+                        <div class="bench-bar"><div class="bench-fill baseline" style="width:100%"><span>100.0%</span></div></div>
+                    </div>
+                    <div class="bench-bar-group">
+                        <div class="bench-label">Out-of-Distribution (OOD)</div>
+                        <div class="bench-bar"><div class="bench-fill ours" style="width:57.3%"><span>57.3%</span></div></div>
+                    </div>
+                </div>
+                <div class="bench-delta" style="color: var(--on-surface-variant); font-size: 11px;">OOD = honest generalization estimate</div>
+            </div>
+            <div class="bench-card glass-panel">
+                <div class="bench-metric">Precision on Auto-Routed</div>
+                <div class="bench-compare">
+                    <div class="bench-bar-group">
+                        <div class="bench-label">In-Distribution</div>
+                        <div class="bench-bar"><div class="bench-fill baseline" style="width:100%"><span>100.0%</span></div></div>
+                    </div>
+                    <div class="bench-bar-group">
+                        <div class="bench-label">Out-of-Distribution</div>
+                        <div class="bench-bar"><div class="bench-fill ours" style="width:100%"><span>100.0%</span></div></div>
+                    </div>
+                </div>
+                <div class="bench-delta positive">Zero false auto-routes on novel data</div>
+            </div>
+            <div class="bench-card glass-panel">
+                <div class="bench-metric">OOD Routing Gate Distribution</div>
+                <div class="bench-compare">
+                    <div class="bench-bar-group">
+                        <div class="bench-label" style="color: var(--green)">Auto-Routed (safe)</div>
+                        <div class="bench-bar"><div class="bench-fill ours" style="width:2.1%; min-width: 32px;"><span>2.1%</span></div></div>
+                    </div>
+                    <div class="bench-bar-group">
+                        <div class="bench-label" style="color: var(--yellow)">Clarify (flagged)</div>
+                        <div class="bench-bar"><div class="bench-fill" style="width:51%; background: var(--yellow);"><span>51.0%</span></div></div>
+                    </div>
+                    <div class="bench-bar-group">
+                        <div class="bench-label" style="color: var(--red)">Escalated (flagged)</div>
+                        <div class="bench-bar"><div class="bench-fill" style="width:46.9%; background: var(--red);"><span>46.9%</span></div></div>
+                    </div>
+                </div>
+                <div class="bench-delta positive">97.9% safely flagged for human review</div>
+            </div>
+            <div class="bench-card glass-panel">
+                <div class="bench-metric">OOD Ambiguous Accuracy</div>
+                <div class="bench-compare">
+                    <div class="bench-bar-group">
+                        <div class="bench-label">Hand-crafted ambiguous tickets</div>
+                        <div class="bench-bar"><div class="bench-fill ours" style="width:30%"><span>30.0%</span></div></div>
+                    </div>
+                </div>
+                <div class="bench-delta" style="color: var(--on-surface-variant); font-size: 11px;">Model correctly defers these to clarification</div>
+            </div>
+        </div>
+
+        <!-- Real-Time System Insights -->
+        <div class="glass-panel" style="margin-top: 40px; padding: 30px; border-top: 1px solid rgba(192, 193, 255, 0.2); background: linear-gradient(180deg, rgba(10, 10, 18, 0.4) 0%, rgba(10, 10, 18, 0.8) 100%);">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;">
+                <div>
+                    <h3 class="viz-title" style="margin: 0; font-size: 18px; letter-spacing: 1px; color: #fff;">System Health & Performance</h3>
+                    <p style="font-size: 12px; color: var(--on-surface-variant); margin-top: 4px;">Real-time telemetry from the SupportMind Engine</p>
+                </div>
+                <div id="live-indicator" class="flex items-center gap-2" style="background: rgba(34, 197, 94, 0.1); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(34, 197, 94, 0.2);">
+                    <span class="status-dot" style="background: #22c55e; box-shadow: 0 0 10px #22c55e;"></span>
+                    <span style="font-size: 11px; font-weight: 600; color: #22c55e; text-transform: uppercase; letter-spacing: 0.5px;">Live Telemetry</span>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div class="insight-card glass-panel" style="padding: 20px; background: rgba(255,255,255,0.02);">
+                    <div class="insight-label" style="font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; font-weight: 600;">Active Model Engine</div>
+                    <div id="live-model" class="insight-value" style="font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #fff;">Syncing...</div>
+                    <div style="margin-top: 12px; font-size: 10px; color: var(--green);">● GPU Optimized Fallback</div>
+                </div>
+                
+                <div class="insight-card glass-panel" style="padding: 20px; background: rgba(255,255,255,0.02); grid-column: span 2;">
+                    <div class="insight-label" style="font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; font-weight: 600;">Routing Efficiency Distribution</div>
+                    <div id="live-dist" class="insight-value">
+                        <div style="display: flex; gap: 4px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05);">
+                            <div id="dist-route" style="width: 0%; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);"></div>
+                            <div id="dist-clarify" style="width: 0%; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);"></div>
+                            <div id="dist-escalate" style="width: 0%; background: linear-gradient(90deg, #ef4444, #f87171); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);"></div>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; font-size: 10px; margin-top: 10px; font-weight: 500;">
+                            <span style="color: #4ade80;">Auto-Route</span>
+                            <span style="color: #fbbf24;">Clarify</span>
+                            <span style="color: #f87171;">Escalate</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="insight-card glass-panel" style="padding: 20px; background: rgba(255,255,255,0.02); text-align: right;">
+                    <div class="insight-label" style="font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; font-weight: 600;">Lifetime Triage</div>
+                    <div id="live-total" class="insight-value" style="font-size: 32px; font-weight: 800; color: #fff; font-family: 'Inter', sans-serif;">0</div>
+                    <div style="font-size: 10px; color: var(--on-surface-variant);">Tickets Orchestrated</div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+    <!-- API Section -->
+    <section class="section section-dark" id="api-section">
+        <div class="section-header">
+            <span class="section-badge">Developer</span>
+            <h2 class="section-title">API Reference</h2>
+            <p class="section-desc">RESTful API with FastAPI — complete documentation at <code>/docs</code></p>
+        </div>
+        <div class="api-grid">
+            <div class="api-card">
+                <div class="api-method post">POST</div>
+                <code class="api-path">/route</code>
+                <p class="api-desc">Main routing endpoint — returns 3-tier confidence-gated decision</p>
+            </div>
+            <div class="api-card">
+                <div class="api-method post">POST</div>
+                <code class="api-path">/clarify</code>
+                <p class="api-desc">Get best clarification question for uncertain ticket</p>
+            </div>
+            <div class="api-card">
+                <div class="api-method post">POST</div>
+                <code class="api-path">/sla/predict</code>
+                <p class="api-desc">Predict SLA breach risk at ticket creation</p>
+            </div>
+            <div class="api-card">
+                <div class="api-method post">POST</div>
+                <code class="api-path">/churn/signal</code>
+                <p class="api-desc">Extract churn signal from thread history</p>
+            </div>
+            <div class="api-card">
+                <div class="api-method get">GET</div>
+                <code class="api-path">/metrics</code>
+                <p class="api-desc">Live system health and routing statistics</p>
+            </div>
+            <div class="api-card">
+                <div class="api-method get">GET</div>
+                <code class="api-path">/health</code>
+                <p class="api-desc">Health check for deployment pipelines</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-content" style="max-width: 1200px; display: flex; justify-content: space-between; align-items: center;">
+            <div style="text-align: left;">
+                <div class="footer-brand" style="font-size: 24px; color: #fff;">AetherFlow</div>
+                <div class="footer-author">© 2026 AetherFlow Technologies. Intelligence through Clarity.</div>
+            </div>
+            <div class="footer-tech" style="display: flex; gap: 24px;">
+                <span>Privacy Policy</span>
+                <span>Terms of Service</span>
+                <span>Security</span>
+                <span>Status</span>
+                <span>Contact</span>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/dashboard/app.js?v=4"></script>
+</body>
+</html>

dashboard/web/style.css

@@ -0,0 +1,598 @@
+/* SupportMind Dashboard — style.css */
+:root {
+  /* AetherFlow Design Tokens */
+  --bg: #0d0d15;
+  --surface: #13131b;
+  --surface-container: #1f1f27;
+  --surface-bright: #393841;
+  --primary: #c0c1ff;
+  --primary-container: #8083ff;
+  --on-primary: #1000a9;
+  --secondary: #89ceff;
+  --accent: #8b5cf6;
+  --text: #e4e1ed;
+  --text-dim: #c7c4d7;
+  --border: rgba(255, 255, 255, 0.08);
+  --glass: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  
+  --green: #4ade80;
+  --yellow: #facc15;
+  --red: #f87171;
+  --orange: #fb923c;
+  
+  --font: 'Inter', system-ui, -apple-system, sans-serif;
+  --mono: 'JetBrains Mono', monospace;
+  --radius: 12px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+/* Glassmorphism */
+.glass-panel {
+  background: var(--glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+}
+
+.shimmer-border {
+  position: relative;
+  overflow: hidden;
+}
+
+.shimmer-border::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
+  opacity: 0.3;
+  animation: shimmer 3s infinite linear;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Nav */
+.navbar {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 40px;
+  background: rgba(13, 13, 21, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  height: 64px;
+}
+.nav-brand { display: flex; align-items: center; gap: 10px; }
+.brand-icon { display: flex; }
+.brand-text { font-weight: 700; font-size: 18px; }
+.brand-badge {
+  font-size: 10px; padding: 2px 8px; border-radius: 20px;
+  background: var(--surface2); color: var(--text2); font-weight: 600;
+}
+.nav-links { display: flex; gap: 8px; }
+.nav-link {
+  color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 500;
+  padding: 6px 14px; border-radius: 8px; transition: all 0.2s;
+}
+.nav-link:hover { color: var(--text); background: var(--surface2); }
+.nav-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); }
+.status-dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
+  animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* Hero */
+.hero {
+  position: relative; z-index: 1;
+  padding: 120px 40px 80px;
+  max-width: 1400px; margin: 0 auto;
+}
+
+.hero-container {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 80px;
+  align-items: center;
+}
+
+.hero-content { text-align: left; }
+
+.hero-eyebrow {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 16px; border-radius: 100px;
+  background: rgba(192, 193, 255, 0.1);
+  color: var(--primary);
+  font-size: 12px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 1px;
+  margin-bottom: 32px;
+}
+
+.hero-title {
+  font-size: clamp(48px, 5vw, 72px); font-weight: 800;
+  line-height: 1.05; margin-bottom: 24px;
+  color: #fff;
+  letter-spacing: -0.04em;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 18px; color: var(--text-dim); max-width: 600px; margin: 0 0 48px;
+  line-height: 1.6;
+}
+
+.hero-actions { display: flex; gap: 16px; justify-content: flex-start; margin-bottom: 0; }
+
+/* Hero Visual (Bento Preview) */
+.hero-visual {
+  position: relative;
+}
+
+.pipeline-card {
+  border-radius: 24px;
+  padding: 24px;
+  position: relative;
+  z-index: 10;
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
+}
+
+.pipeline-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 24px; padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.window-controls { display: flex; gap: 6px; }
+.dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.5; }
+.dot-red { background: var(--red); }
+.dot-amber { background: var(--yellow); }
+.dot-green { background: var(--green); }
+
+.pipeline-status { font-family: var(--mono); font-size: 12px; color: #666; }
+
+.pipeline-tiers { display: flex; flex-direction: column; gap: 16px; }
+
+.tier-card {
+  padding: 16px; border-radius: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex; justify-content: space-between; align-items: center;
+  transition: all 0.3s;
+}
+
+.tier-card.active {
+  background: rgba(192, 193, 255, 0.08);
+  border-color: rgba(192, 193, 255, 0.2);
+}
+
+.tier-info { display: flex; align-items: center; gap: 16px; }
+.tier-icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  background: rgba(192, 193, 255, 0.15);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--primary);
+}
+
+.tier-name { font-size: 14px; font-weight: 600; color: #fff; }
+.tier-meta { font-size: 12px; color: #666; }
+.tier-indicator { font-size: 20px; }
+
+
+/* Buttons */
+.btn {
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 14px 32px; border-radius: 12px; font-size: 15px; font-weight: 700;
+  text-decoration: none; cursor: pointer; border: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: var(--font);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: var(--on-primary);
+  box-shadow: 0 8px 24px rgba(192, 193, 255, 0.2);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px rgba(192, 193, 255, 0.3);
+  filter: brightness(1.1);
+}
+
+.btn-ghost {
+  background: rgba(255, 255, 255, 0.03);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--primary);
+}
+
+/* Stats Section */
+.hero-stats {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
+  max-width: 1400px; margin: 0 auto;
+  padding: 0 40px 80px;
+}
+
+.stat-card {
+  padding: 32px;
+  border-radius: 20px;
+  transition: all 0.3s;
+}
+
+.stat-card:hover {
+  border-color: rgba(192, 193, 255, 0.2);
+  transform: translateY(-4px);
+  background: rgba(192, 193, 255, 0.03);
+}
+
+.stat-label {
+  font-size: 12px; font-weight: 600; color: #666;
+  text-transform: uppercase; letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 40px; font-weight: 800; color: #fff;
+  line-height: 1; margin-bottom: 12px;
+}
+
+.stat-delta {
+  font-size: 13px; font-weight: 600;
+  display: flex; align-items: center; gap: 4px;
+}
+
+.btn-full { width: 100%; justify-content: center; padding: 14px; font-size: 16px; margin-top: 16px; }
+.btn-icon { font-size: 20px; }
+
+
+/* Sections */
+.section {
+  position: relative; z-index: 1;
+  padding: 100px 40px;
+  max-width: 1400px; margin: 0 auto;
+}
+.section-dark { max-width: none; background: #0a0a0f; }
+.section-dark > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
+.section-header { text-align: center; margin-bottom: 60px; }
+.section-badge {
+  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 2px; color: var(--primary); background: rgba(192, 193, 255, 0.1);
+  padding: 6px 18px; border-radius: 20px; margin-bottom: 16px;
+}
+.section-title { font-size: 40px; font-weight: 800; margin-bottom: 16px; color: #fff; }
+.section-desc { font-size: 17px; color: var(--text-dim); max-width: 700px; margin: 0 auto; }
+
+/* Demo */
+.demo-container {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
+}
+.demo-input-panel, .demo-results-panel {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius2); padding: 28px;
+}
+.input-label { font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: 10px; display: block; }
+.ticket-textarea {
+  width: 100%; background: var(--bg); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 14px; color: var(--text);
+  font-family: var(--font); font-size: 14px; resize: vertical;
+  transition: border-color 0.2s; line-height: 1.6;
+}
+.ticket-textarea:focus { outline: none; border-color: var(--primary); }
+.demo-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
+.preset-label { font-size: 13px; color: var(--text3); font-weight: 500; }
+.preset-btn {
+  font-size: 12px; padding: 4px 12px; border-radius: 6px;
+  background: var(--surface2); border: 1px solid var(--border);
+  color: var(--text2); cursor: pointer; font-family: var(--font);
+  transition: all 0.2s;
+}
+.preset-btn:hover { border-color: var(--primary); color: var(--primary2); }
+
+/* Result placeholder */
+.result-placeholder {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: 100%; min-height: 300px; color: var(--text3); text-align: center;
+}
+.placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+
+/* Action badge */
+.action-badge-container { text-align: center; margin-bottom: 20px; }
+.action-badge {
+  display: inline-block; padding: 8px 24px; border-radius: 8px;
+  font-size: 18px; font-weight: 800; font-family: var(--mono);
+  letter-spacing: 2px;
+  animation: badgePop 0.4s ease;
+}
+@keyframes badgePop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+.action-badge.route { background: rgba(74, 222, 128, 0.1); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.2); }
+.action-badge.clarify { background: rgba(250, 204, 21, 0.1); color: var(--yellow); border: 1px solid rgba(250, 204, 21, 0.2); }
+.action-badge.escalate { background: rgba(248, 113, 113, 0.1); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.2); }
+.action-queue { font-size: 13px; color: var(--text2); margin-top: 8px; }
+
+/* Gauges */
+.gauge-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
+.gauge-container { position: relative; }
+.gauge-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; }
+.gauge-track {
+  height: 10px; background: var(--bg); border-radius: 5px;
+  overflow: hidden; position: relative;
+}
+.gauge-fill {
+  height: 100%; border-radius: 5px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(90deg, var(--green), var(--primary));
+  position: relative; z-index: 2;
+}
+.entropy-fill { background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--red)); }
+.gauge-zones { position: absolute; inset: 0; display: flex; opacity: 0.15; }
+.zone { height: 100%; }
+.zone-red { background: var(--red); }
+.zone-yellow { background: var(--yellow); }
+.zone-green { background: var(--green); }
+.gauge-value { font-size: 20px; font-weight: 700; font-family: var(--mono); margin-top: 6px; }
+
+/* Probability chart */
+.prob-chart { margin-bottom: 20px; }
+.prob-row {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
+  font-size: 12px;
+}
+.prob-label { width: 130px; color: var(--text2); text-align: right; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.prob-bar-track { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
+.prob-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; background: var(--primary); }
+.prob-val { width: 50px; font-family: var(--mono); color: var(--text3); font-size: 11px; }
+
+/* Clarification */
+.clarification-box {
+  background: rgba(234,179,8,0.06); border: 1px solid rgba(234,179,8,0.2);
+  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
+}
+.clarify-header { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--yellow); }
+.clarify-question { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
+.clarify-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
+.clarify-options .option-btn {
+  padding: 6px 16px; border-radius: 6px; font-size: 13px;
+  background: var(--surface2); border: 1px solid var(--border);
+  color: var(--text); cursor: pointer; font-family: var(--font);
+}
+.clarify-gain { font-size: 12px; color: var(--text3); }
+
+/* Signals */
+.signals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
+.signal-card {
+  background: var(--bg); border-radius: 8px; padding: 14px; text-align: center;
+}
+.signal-label { font-size: 11px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
+.signal-value { font-size: 18px; font-weight: 700; font-family: var(--mono); margin-top: 4px; }
+.signal-bar { height: 4px; background: var(--surface); border-radius: 2px; margin-top: 8px; overflow: hidden; }
+.signal-fill { height: 100%; border-radius: 2px; background: var(--orange); transition: width 0.6s; }
+.result-reason {
+  font-size: 13px; color: var(--text3); text-align: center;
+  padding: 12px; background: var(--bg); border-radius: 8px;
+  font-style: italic;
+}
+
+/* Architecture */
+.arch-pipeline {
+  display: flex; align-items: stretch; gap: 0; margin-bottom: 80px;
+  justify-content: center;
+}
+.arch-stage {
+  padding: 32px; flex: 1; max-width: 340px;
+  text-align: center; transition: all 0.3s;
+  border-radius: 24px;
+}
+.arch-stage:hover { border-color: var(--primary); transform: translateY(-6px); }
+.stage-highlight { border-color: var(--primary); background: rgba(192, 193, 255, 0.05); }
+.stage-number {
+  width: 40px; height: 40px; border-radius: 50%;
+  background: var(--primary);
+  color: var(--on-primary); font-weight: 800; font-size: 18px;
+  display: inline-flex; align-items: center; justify-content: center;
+  margin-bottom: 16px;
+}
+.stage-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #fff; }
+.stage-details { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
+.tech-tag {
+  font-size: 11px; padding: 4px 12px; border-radius: 6px;
+  background: rgba(192, 193, 255, 0.1); color: var(--primary); font-weight: 700;
+}
+.stage-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
+.arch-arrow {
+  display: flex; align-items: center; font-size: 28px; color: #333;
+  padding: 0 16px;
+}
+
+/* MC Dropout Viz */
+.mc-dropout-viz {
+  text-align: center; margin-bottom: 60px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius2); padding: 36px;
+}
+.viz-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
+.viz-desc { font-size: 14px; color: var(--text2); margin-bottom: 24px; max-width: 600px; margin-left: auto; margin-right: auto; }
+.dropout-grid { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
+.dropout-col { display: flex; flex-direction: column; gap: 3px; }
+.dropout-cell {
+  width: 10px; height: 10px; border-radius: 2px; transition: all 0.3s;
+}
+.dropout-legend { display: flex; gap: 20px; justify-content: center; font-size: 12px; color: var(--text3); }
+.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
+
+/* Competitor Table */
+.competitor-table-wrap { overflow-x: auto; }
+.competitor-table {
+  width: 100%; border-collapse: collapse; font-size: 14px;
+}
+.competitor-table th {
+  text-align: left; padding: 14px 16px; color: var(--text2);
+  font-weight: 600; font-size: 12px; text-transform: uppercase;
+  letter-spacing: 1px; border-bottom: 1px solid var(--border);
+}
+.competitor-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); }
+.cell-no { color: var(--red); }
+.cell-yes { color: var(--green); font-weight: 600; }
+.cell-partial { color: var(--yellow); }
+.row-highlight { background: rgba(99,102,241,0.06); }
+
+/* Benchmarks */
+.benchmark-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }
+.bench-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius2); padding: 24px;
+}
+.bench-metric { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
+.bench-bar-group { margin-bottom: 8px; }
+.bench-label { font-size: 12px; color: var(--text3); margin-bottom: 4px; font-weight: 500; }
+.bench-bar { height: 28px; background: var(--bg); border-radius: 6px; overflow: hidden; }
+.bench-fill {
+  height: 100%; border-radius: 6px; display: flex; align-items: center;
+  padding-left: 12px; font-size: 13px; font-weight: 700; font-family: var(--mono);
+  transition: width 1s ease;
+}
+.bench-fill.baseline { background: rgba(148,163,184,0.2); color: var(--text2); }
+.bench-fill.ours { background: linear-gradient(90deg, var(--primary), var(--accent)); color: white; }
+.bench-fill.bad { background: rgba(239,68,68,0.2); color: var(--red); }
+.bench-delta { font-size: 14px; font-weight: 700; color: var(--green); margin-top: 8px; text-align: right; }
+
+/* Ops Grid */
+.ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.ops-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 24px; text-align: center;
+}
+.ops-icon { font-size: 28px; margin-bottom: 10px; }
+.ops-metric { font-size: 13px; color: var(--text2); font-weight: 600; margin-bottom: 12px; }
+.ops-before { font-size: 18px; font-weight: 700; color: var(--text3); font-family: var(--mono); }
+.ops-arrow { color: var(--text3); margin: 6px 0; }
+.ops-after { font-size: 22px; font-weight: 800; color: white; font-family: var(--mono); }
+.ops-delta { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 8px; }
+.ops-delta.positive { color: var(--green); }
+
+/* API */
+.api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.api-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 20px;
+}
+.api-method {
+  display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px;
+  border-radius: 4px; font-family: var(--mono); margin-bottom: 8px;
+}
+.api-method.post { background: rgba(99,102,241,0.15); color: var(--primary2); }
+.api-method.get { background: rgba(34,197,94,0.15); color: var(--green); }
+.api-path { font-family: var(--mono); font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px; }
+.api-desc { font-size: 13px; color: var(--text3); }
+
+/* Footer */
+.footer {
+  position: relative; z-index: 1;
+  border-top: 1px solid var(--border); padding: 80px 40px;
+  background: #050508;
+}
+.footer-brand { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -1px; }
+.footer-author { font-size: 14px; color: #666; margin-bottom: 8px; }
+.footer-tech { font-size: 14px; color: #666; font-weight: 500; cursor: pointer; }
+.footer-tech span:hover { color: var(--primary); }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .hero-stats { grid-template-columns: repeat(2, 1fr); }
+  .demo-container { grid-template-columns: 1fr; }
+  .arch-pipeline { flex-direction: column; align-items: center; }
+  .arch-arrow { transform: rotate(90deg); padding: 8px; }
+  .benchmark-grid, .ops-grid, .api-grid { grid-template-columns: 1fr; }
+  .signals-grid { grid-template-columns: repeat(2, 1fr); }
+  .gauge-row { grid-template-columns: 1fr; }
+  .navbar { padding: 12px 16px; }
+  .nav-links { display: none; }
+}
+
+/* Animations */
+.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
+.fade-in.visible { opacity: 1; transform: translateY(0); }
+
+/* Loading spinner */
+.spinner {
+  display: inline-block; width: 20px; height: 20px;
+  border: 2px solid rgba(255,255,255,0.2); border-top-color: white;
+  border-radius: 50%; animation: spin 0.6s linear infinite;
+}
+/* SHAP Interpretability */
+.explanation-box {
+  background: rgba(192, 193, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-bottom: 20px;
+  animation: fadeIn 0.4s ease;
+}
+.explain-header {
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 12px;
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.explain-text {
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 2.2;
+  color: var(--text);
+  margin-bottom: 16px;
+}
+.shap-token {
+  padding: 2px 4px;
+  margin: 0 1px;
+  border-radius: 4px;
+  display: inline-block;
+  transition: all 0.3s;
+}
+.explain-legend {
+  display: flex;
+  gap: 16px;
+  font-size: 11px;
+  color: var(--text3);
+}
+.legend-item { display: flex; align-items: center; gap: 6px; }
+.highlight-box {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+.highlight-box.pos { background: rgba(74, 222, 128, 0.4); border: 1px solid var(--green); }
+.highlight-box.neg { background: rgba(248, 113, 113, 0.4); border: 1px solid var(--red); }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+