Spaces:
Sleeping
Sleeping
| <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"> | |
| <a href="#demo" class="btn-ghost" style="padding: 8px 16px; font-size: 13px; text-decoration: none;">Demo Mode</a> | |
| <a href="/docs" class="btn-primary" style="padding: 8px 20px; font-size: 13px; text-decoration: none;">API Docs</a> | |
| </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> | |
| B2B SaaS Support Routing Demo | |
| </div> | |
| <h1 class="hero-title"> | |
| Support AI that <span class="gradient-text italic">knows</span> when to ask | |
| </h1> | |
| <p class="hero-subtitle"> | |
| Confidence-gated ticket routing with uncertainty scoring, multi-intent detection, | |
| and SLA risk signals. Three-tier routing: | |
| <strong>Route</strong> · <strong>Clarify</strong> · <strong>Escalate</strong>. | |
| Built to reduce unsafe auto-routing on ambiguous customer tickets. | |
| </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 > 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> | |
| <button class="preset-btn" data-text="Our launch is in 30 minutes and export is not working. The client is waiting on this before signing.">Launch Risk</button> | |
| <button class="preset-btn" data-text="Could you please help resolve this? This is becoming difficult for our onboarding team and we are disappointed with repeated delays.">Polite Risk</button> | |
| <button class="preset-btn" data-text="No rush, but can you tell me how to update the invoice email before tomorrow?">No Rush</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">AI</div> | |
| <p>Enter a ticket to see whether SupportMind routes, clarifies, or escalates.</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">Clarification: 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 class="signal-subvalue" id="sentiment-score">-</div> | |
| </div> | |
| <div class="signal-card"> | |
| <div class="signal-label">Urgency</div> | |
| <div class="signal-value" id="urgency-value">-</div> | |
| <div class="signal-subvalue" id="urgency-score">-</div> | |
| </div> | |
| <div class="signal-card"> | |
| <div class="signal-label">Latency</div> | |
| <div class="signal-value" id="latency-value">-</div> | |
| </div> | |
| </div> | |
| <div class="signal-evidence-grid" id="signal-evidence-grid"> | |
| <div class="evidence-panel"> | |
| <div class="evidence-header"> | |
| <span class="material-symbols-outlined">priority_high</span> | |
| Urgency Evidence | |
| </div> | |
| <div class="evidence-list" id="urgency-evidence-list"></div> | |
| </div> | |
| <div class="evidence-panel"> | |
| <div class="evidence-header"> | |
| <span class="material-symbols-outlined">psychology</span> | |
| Sentiment Evidence | |
| </div> | |
| <div class="evidence-list" id="sentiment-evidence-list"></div> | |
| </div> | |
| </div> | |
| <div class="result-reason" id="result-reason"></div> | |
| <!-- Decision explanation --> | |
| <div class="explanation-box" id="explanation-box" style="display:none"> | |
| <div class="explain-header"> | |
| <span class="material-symbols-outlined">analytics</span> | |
| Decision Evidence | |
| </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 | |
| </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);">Status: 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> | |
| <script src="/dashboard/app.js?v=6"></script> | |
| </body> | |
| </html> | |