| """ |
| Gradio-only UI components for ARF |
| Ensures full compatibility with app.py |
| NOW WITH DOCTRINAL COMPLIANCE: Psychological Advantage Enforcement |
| UPDATED: Language discipline, observation gate rendering, recall panel dominance |
| UPDATED: Metric discipline, sequencing display, no early "critical" terminology |
| DOCTRINAL VERSION: 3.3.9+restraint |
| """ |
|
|
| import gradio as gr |
| from typing import Dict, List, Any |
| import logging |
| import datetime |
| import time |
| import plotly.graph_objects as go |
| import plotly.express as px |
| import numpy as np |
|
|
| logger = logging.getLogger(__name__) |
|
|
| |
| try: |
| from config.scenario_registry import ScenarioRegistry |
| INCIDENT_SCENARIOS = ScenarioRegistry.load_scenarios() |
| logger.info(f"Loaded {len(INCIDENT_SCENARIOS)} scenarios from registry") |
| except ImportError: |
| logger.warning("Scenario registry not available, falling back to demo scenarios") |
| from demo.scenarios import INCIDENT_SCENARIOS |
|
|
| |
| |
| |
| def create_header(version="3.3.9") -> gr.HTML: |
| return gr.HTML(f""" |
| <div style="text-align: center; margin-bottom: 25px; display: flex; justify-content: center;"> |
| <div style="max-width: 1200px; width: 100%;"> |
| <img src="https://raw.githubusercontent.com/petterjuan/agentic-reliability-framework/main/assets/agentic-reliability-banner.png" |
| alt="Reliability Framework" |
| style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);"> |
| <div style="margin-top: 20px;"> |
| <h2 style="margin: 0 0 8px 0; font-size: 24px; color: #1e293b; font-weight: 600;"> |
| v{version} (Policy + Enterprise Edition) |
| </h2> |
| <p style="margin: 0 0 15px 0; font-size: 16px; color: #64748b; max-width: 600px; margin-left: auto; margin-right: auto;"> |
| Production-grade policy execution for system reliability intelligence |
| </p> |
| |
| <!-- Clean Architecture Badge --> |
| <div style="display: inline-block; padding: 8px 20px; background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%); |
| border: 2px solid #3b82f6; border-radius: 20px; font-size: 14px; font-weight: 600; color: #1e40af;"> |
| 🏗️ Architecture: OSS advises → Enterprise executes |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_status_bar() -> gr.HTML: |
| return gr.HTML(""" |
| <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; padding: 15px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; flex-wrap: wrap;"> |
| <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;"> |
| ✅ Policy System Online |
| </span> |
| <span style="padding: 8px 16px; background: #8b5cf6; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #8b5cf6;"> |
| ✅ ARF OSS v3.3.9 |
| </span> |
| <span style="padding: 8px 16px; background: #3b82f6; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #3b82f6;"> |
| 🏢 Enterprise Execution |
| </span> |
| </div> |
| """) |
|
|
| |
| |
| |
|
|
| def create_observation_gate_placeholder(confidence: float = 65.0) -> gr.HTML: |
| """Observation gate that demonstrates psychological restraint. |
| |
| Shows 'Decision Intentionally Deferred' when confidence is below threshold. |
| This is a critical doctrinal component showing restraint as a system choice. |
| """ |
| if confidence < 70.0: |
| html_content = f""" |
| <div class="observation-gate" style=" |
| border: 2px solid #4A5568; |
| border-radius: 8px; |
| padding: 20px; |
| margin: 10px 0; |
| background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%); |
| color: #E2E8F0; |
| font-family: 'Inter', sans-serif; |
| "> |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> |
| <div style=" |
| background: #2D3748; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 15px; |
| border: 2px solid #4A5568; |
| "> |
| <span style="font-size: 20px;">⚠️</span> |
| </div> |
| <div> |
| <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE ACTIVE</h3> |
| <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">System restraint engaged</p> |
| </div> |
| </div> |
| |
| <div style=" |
| background: rgba(45, 55, 72, 0.5); |
| border-left: 4px solid #ECC94B; |
| padding: 15px; |
| margin: 15px 0; |
| border-radius: 0 4px 4px 0; |
| "> |
| <h4 style="margin: 0 0 10px 0; color: #ECC94B; font-weight: 500;"> |
| Decision Intentionally Deferred |
| </h4> |
| <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;"> |
| The system has detected uncertainty ({confidence:.1f}% confidence) and has chosen to observe rather than act. |
| This is not a limitation—it is a psychological advantage demonstrating restraint. |
| Historical evidence suggests premature action increases risk by 47%. |
| </p> |
| </div> |
| |
| <div style="display: flex; justify-content: space-between; align-items: center;"> |
| <div> |
| <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span> |
| </div> |
| <div> |
| <span style=" |
| display: inline-block; |
| background: #4A5568; |
| color: white; |
| padding: 4px 12px; |
| border-radius: 12px; |
| font-size: 13px; |
| font-weight: 500; |
| "> |
| {confidence:.1f}% confidence |
| </span> |
| </div> |
| </div> |
| </div> |
| """ |
| else: |
| html_content = """ |
| <div class="observation-gate" style=" |
| border: 2px solid #38A169; |
| border-radius: 8px; |
| padding: 20px; |
| margin: 10px 0; |
| background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%); |
| color: #E2E8F0; |
| font-family: 'Inter', sans-serif; |
| "> |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> |
| <div style=" |
| background: #2D3748; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 15px; |
| border: 2px solid #38A169; |
| "> |
| <span style="font-size: 20px;">✅</span> |
| </div> |
| <div> |
| <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE CLEARED</h3> |
| <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">Confidence threshold met</p> |
| </div> |
| </div> |
| |
| <div style=" |
| background: rgba(56, 161, 105, 0.15); |
| border-left: 4px solid #38A169; |
| padding: 15px; |
| margin: 15px 0; |
| border-radius: 0 4px 4px 0; |
| "> |
| <h4 style="margin: 0 0 10px 0; color: #38A169; font-weight: 500;"> |
| Proceed with Policy Action |
| </h4> |
| <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;"> |
| Confidence exceeds threshold. System may proceed with sequenced actions. |
| Historical evidence will be consulted before any execution. |
| </p> |
| </div> |
| |
| <div style="display: flex; justify-content: space-between; align-items: center;"> |
| <div> |
| <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span> |
| </div> |
| <div> |
| <span style=" |
| display: inline-block; |
| background: #38A169; |
| color: white; |
| padding: 4px 12px; |
| border-radius: 12px; |
| font-size: 13px; |
| font-weight: 500; |
| "> |
| 85.0% confidence |
| </span> |
| </div> |
| </div> |
| </div> |
| """ |
| |
| return gr.HTML(html_content) |
|
|
| def create_sequencing_visualization() -> gr.HTML: |
| """Creates the sequencing panel showing dampening-first progression. |
| |
| Doctrinal: Shows sequencing as policy, not reaction. |
| """ |
| return gr.HTML(""" |
| <div style="border: 2px solid #3b82f6; border-radius: 16px; padding: 25px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-bottom: 25px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> |
| <div> |
| <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;"> |
| 🔄 Doctrinal Sequencing: Policy Over Reaction |
| </h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;"> |
| System enforces sequencing regardless of prediction confidence |
| </p> |
| </div> |
| <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| POLICY ENFORCED |
| </div> |
| </div> |
| |
| <!-- Sequencing Steps --> |
| <div style="display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 30px;"> |
| <!-- Connecting line --> |
| <div style="position: absolute; top: 50%; left: 60px; right: 60px; height: 3px; background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6, #f59e0b); z-index: 1;"></div> |
| |
| <!-- Step 1: Dampening --> |
| <div style="text-align: center; position: relative; z-index: 2; flex: 1;"> |
| <div style="width: 60px; height: 60px; background: #3b82f6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; |
| font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);"> |
| 1 |
| </div> |
| <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Dampening</div> |
| <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Prevent amplification first</div> |
| <div style="margin-top: 10px; padding: 6px 12px; background: #3b82f6; color: white; border-radius: 15px; |
| font-size: 11px; font-weight: bold; display: inline-block;"> |
| REQUIRED |
| </div> |
| </div> |
| |
| <!-- Arrow --> |
| <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div> |
| |
| <!-- Step 2: Concurrency Control --> |
| <div style="text-align: center; position: relative; z-index: 2; flex: 1;"> |
| <div style="width: 60px; height: 60px; background: #10b981; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; |
| font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);"> |
| 2 |
| </div> |
| <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Concurrency</div> |
| <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Manage load, then observe</div> |
| <div style="margin-top: 10px; padding: 6px 12px; background: #10b981; color: white; border-radius: 15px; |
| font-size: 11px; font-weight: bold; display: inline-block;"> |
| REQUIRED |
| </div> |
| </div> |
| |
| <!-- Arrow --> |
| <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div> |
| |
| <!-- Step 3: Observe --> |
| <div style="text-align: center; position: relative; z-index: 2; flex: 1;"> |
| <div style="width: 60px; height: 60px; background: #8b5cf6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; |
| font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);"> |
| 3 |
| </div> |
| <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Observe</div> |
| <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Validate trends for 5+ minutes</div> |
| <div style="margin-top: 10px; padding: 6px 12px; background: #8b5cf6; color: white; border-radius: 15px; |
| font-size: 11px; font-weight: bold; display: inline-block;"> |
| REQUIRED |
| </div> |
| </div> |
| |
| <!-- Arrow --> |
| <div style="font-size: 28px; color: #94a3b8; z-index: 2;">→</div> |
| |
| <!-- Step 4: Scale --> |
| <div style="text-align: center; position: relative; z-index: 2; flex: 1;"> |
| <div style="width: 60px; height: 60px; background: #f59e0b; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; |
| font-size: 24px; font-weight: bold; border: 4px solid white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);"> |
| 4 |
| </div> |
| <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 5px;">Scale</div> |
| <div style="font-size: 12px; color: #64748b; max-width: 180px; margin: 0 auto;">Only if all previous succeed</div> |
| <div style="margin-top: 10px; padding: 6px 12px; background: #f59e0b; color: white; border-radius: 15px; |
| font-size: 11px; font-weight: bold; display: inline-block;"> |
| OPTIONAL |
| </div> |
| </div> |
| </div> |
| |
| <!-- Doctrinal Constraint --> |
| <div style="background: #f8fafc; border-radius: 12px; padding: 20px; border-left: 4px solid #3b82f6;"> |
| <div style="display: flex; align-items: flex-start; gap: 15px;"> |
| <div style="font-size: 24px; color: #3b82f6;">🎯</div> |
| <div style="flex: 1;"> |
| <div style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;"> |
| Doctrinal Constraint: Scaling Cannot Appear First |
| </div> |
| <div style="font-size: 14px; color: #475569; line-height: 1.6;"> |
| If retry amplification is detected, scaling is <strong>contraindicated entirely</strong>. |
| The system must observe stabilization before considering capacity increases. |
| Historical evidence shows scaling-first fails 76% of the time during amplification. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Sequence State --> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px; |
| padding-top: 20px; border-top: 2px solid #e2e8f0;"> |
| <div> |
| <div style="font-size: 13px; color: #64748b; margin-bottom: 5px;">Current Sequence State</div> |
| <div style="font-size: 15px; font-weight: 600; color: #1e293b;">Waiting for detection process</div> |
| </div> |
| <div style="display: flex; gap: 10px;"> |
| <div style="padding: 8px 16px; background: #f1f5f9; color: #64748b; border-radius: 20px; font-size: 12px; font-weight: 500;"> |
| 🔄 Sequence: 0/4 |
| </div> |
| <div style="padding: 8px 16px; background: #f1f5f9; color: #64748b; border-radius: 20px; font-size: 12px; font-weight: 500;"> |
| ⏱️ Time: 0s |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_detection_display() -> gr.HTML: |
| """Creates detection process HTML display.""" |
| return gr.HTML(""" |
| <div style="border: 2px solid #3b82f6; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin: 10px 0;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 12px;"> |
| <div style="width: 40px; height: 40px; background: #3b82f6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 18px;"> |
| 🕵️♂️ |
| </div> |
| <div> |
| <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Detection Process</h4> |
| <p style="margin: 0; font-size: 13px; color: #64748b;">Telemetry analysis & pattern recognition</p> |
| </div> |
| </div> |
| <div style="padding: 6px 14px; background: #dbeafe; color: #1d4ed8; border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| STATUS: ACTIVE |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px;"> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Pattern Match</div> |
| <div style="font-size: 14px; color: #1e293b; font-weight: 500;">Retry Amplification</div> |
| </div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Confidence</div> |
| <div style="font-size: 14px; color: #1e293b; font-weight: 500;">92.7%</div> |
| </div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Detection Time</div> |
| <div style="font-size: 14px; color: #1e293b; font-weight: 500;">0.8 seconds</div> |
| </div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Severity</div> |
| <div style="font-size: 14px; color: #f59e0b; font-weight: 500;">HIGH_VARIANCE</div> |
| </div> |
| </div> |
| |
| <div style="background: #f0fdf4; border-radius: 10px; padding: 15px; border-left: 4px solid #10b981;"> |
| <div style="font-size: 14px; color: #065f46; font-weight: 500;"> |
| ✅ Detected: Retry amplification pattern with exponential growth (r=1.8) |
| </div> |
| <div style="font-size: 13px; color: #047857; margin-top: 5px;"> |
| Telemetry shows request rate doubling every 45 seconds. System flagged for sequencing enforcement. |
| </div> |
| </div> |
| |
| <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;"> |
| <div> |
| <div style="font-size: 12px; color: #64748b;">Next Step:</div> |
| <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Activate recall process</div> |
| </div> |
| <div style="display: flex; gap: 8px;"> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📊 12 metrics</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">⏱️ 0.8s latency</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🔍 3 patterns</span> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_recall_display() -> gr.HTML: |
| """Creates recall process HTML display with historical evidence dominance.""" |
| return gr.HTML(""" |
| <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); margin: 10px 0;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 12px;"> |
| <div style="width: 40px; height: 40px; background: #8b5cf6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 18px;"> |
| 🧠 |
| </div> |
| <div> |
| <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Recall Process</h4> |
| <p style="margin: 0; font-size: 13px; color: #64748b;">Historical evidence & pattern matching</p> |
| </div> |
| </div> |
| <div style="padding: 6px 14px; background: #ede9fe; color: #5b21b6; border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| STATUS: ACTIVE |
| </div> |
| </div> |
| |
| <div style="background: #f5f3ff; border-radius: 10px; padding: 20px; margin-bottom: 20px;"> |
| <div style="font-size: 15px; font-weight: 600; color: #5b21b6; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;"> |
| 🏆 RECALL DOMINANCE: Historical Evidence > Predictive Confidence |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;"> |
| <!-- Scaling-First Failures --> |
| <div> |
| <div style="font-size: 14px; font-weight: 600; color: #dc2626; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;"> |
| ⛔ Scaling-First Failures |
| </div> |
| |
| <div style="border-left: 3px solid #dc2626; padding-left: 12px; margin-bottom: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-11-15 • prod-east</div> |
| <div style="padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 10px; font-size: 10px; font-weight: bold;">FAILED</div> |
| </div> |
| <div style="font-size: 11px; color: #475569; margin-bottom: 3px;"> |
| <strong>Action:</strong> Scale during retry storm |
| </div> |
| <div style="font-size: 11px; color: #dc2626; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> Amplification increased 300% |
| </div> |
| <div style="font-size: 10px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 6px; border-radius: 4px;"> |
| "Scaling during amplification worsens the problem" |
| </div> |
| </div> |
| |
| <div style="border-left: 3px solid #dc2626; padding-left: 12px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-09-22 • staging</div> |
| <div style="padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: 10px; font-size: 10px; font-weight: bold;">FAILED</div> |
| </div> |
| <div style="font-size: 11px; color: #475569; margin-bottom: 3px;"> |
| <strong>Action:</strong> Add capacity without dampening |
| </div> |
| <div style="font-size: 11px; color: #dc2626; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> 45 min outage, $8.2K loss |
| </div> |
| <div style="font-size: 10px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 6px; border-radius: 4px;"> |
| "New capacity consumed by amplification loop" |
| </div> |
| </div> |
| </div> |
| |
| <!-- Dampening-First Successes --> |
| <div> |
| <div style="font-size: 14px; font-weight: 600; color: #10b981; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;"> |
| ✅ Dampening-First Successes |
| </div> |
| |
| <div style="border-left: 3px solid #10b981; padding-left: 12px; margin-bottom: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-12-03 • prod-west</div> |
| <div style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: 10px; font-size: 10px; font-weight: bold;">SUCCESS</div> |
| </div> |
| <div style="font-size: 11px; color: #475569; margin-bottom: 3px;"> |
| <strong>Action:</strong> Request coalescing + backoff |
| </div> |
| <div style="font-size: 11px; color: #10b981; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> Resolved in 8 min, $5.1K saved |
| </div> |
| <div style="font-size: 10px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 6px; border-radius: 4px;"> |
| "Dampening broke amplification cycle" |
| </div> |
| </div> |
| |
| <div style="border-left: 3px solid #10b981; padding-left: 12px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">2024-10-17 • prod-eu</div> |
| <div style="padding: 2px 8px; background: #dcfce7; color: #166534; border-radius: 10px; font-size: 10px; font-weight: bold;">SUCCESS</div> |
| </div> |
| <div style="font-size: 11px; color: #475569; margin-bottom: 3px;"> |
| <strong>Action:</strong> Circuit breaker + observability |
| </div> |
| <div style="font-size: 11px; color: #10b981; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> 12 min recovery, 0 user impact |
| </div> |
| <div style="font-size: 10px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 6px; border-radius: 4px;"> |
| "Sequencing prevented escalation" |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="background: #fef3c7; border-radius: 10px; padding: 15px; border-left: 4px solid #f59e0b;"> |
| <div style="font-size: 14px; color: #92400e; font-weight: 500; margin-bottom: 5px;"> |
| 🎯 RECALL DECISION: Scaling contraindicated due to historical evidence |
| </div> |
| <div style="font-size: 13px; color: #b45309;"> |
| Historical evidence (76% failure rate) dominates predictive confidence (92%). |
| System will enforce dampening-first sequencing. |
| </div> |
| </div> |
| |
| <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;"> |
| <div> |
| <div style="font-size: 12px; color: #64748b;">Evidence Weight:</div> |
| <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Historical: 85% • Predictive: 15%</div> |
| </div> |
| <div style="display: flex; gap: 8px;"> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📚 8 incidents</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🎯 76% failure rate</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🏆 recall dominance</span> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_decision_display() -> gr.HTML: |
| """Creates decision process HTML display.""" |
| return gr.HTML(""" |
| <div style="border: 2px solid #10b981; border-radius: 14px; padding: 20px; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); margin: 10px 0;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 12px;"> |
| <div style="width: 40px; height: 40px; background: #10b981; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 18px;"> |
| 🎯 |
| </div> |
| <div> |
| <h4 style="margin: 0 0 4px 0; font-size: 16px; color: #1e293b; font-weight: 600;">Decision Process</h4> |
| <p style="margin: 0; font-size: 13px; color: #64748b;">HealingIntent creation & sequencing</p> |
| </div> |
| </div> |
| <div style="padding: 6px 14px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| STATUS: ACTIVE |
| </div> |
| </div> |
| |
| <!-- Formal HealingIntent Display --> |
| <div style="background: white; border-radius: 10px; padding: 20px; border: 2px solid #e2e8f0; margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9;"> |
| <div> |
| <h5 style="margin: 0 0 5px 0; font-size: 15px; color: #1e293b; font-weight: 600;">Formal HealingIntent Created</h5> |
| <p style="margin: 0; font-size: 12px; color: #64748b;">Preconditions checked, contraindications listed</p> |
| </div> |
| <div style="padding: 6px 12px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
| color: white; border-radius: 15px; font-size: 11px; font-weight: bold;"> |
| CONFIDENCE: 87.3% |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;"> |
| <div> |
| <div style="font-size: 13px; color: #475569; margin-bottom: 8px; font-weight: 600;">Primary Action</div> |
| <div style="padding: 12px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #10b981;"> |
| <div style="font-size: 14px; color: #065f46; font-weight: 500;"> |
| Implement request coalescing with exponential backoff (jitter: 25%) |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div style="font-size: 13px; color: #475569; margin-bottom: 8px; font-weight: 600;">Sequencing Rule</div> |
| <div style="padding: 12px; background: #f0f9ff; border-radius: 8px; border-left: 4px solid #0ea5e9;"> |
| <div style="font-size: 14px; color: #0369a1; font-weight: 500;"> |
| dampening_first_then_observe_then_optional_scale |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;"> |
| <div style="padding: 10px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Preconditions</div> |
| <div style="font-size: 11px; color: #475569;">• Retry amplification detected<br>• Confidence > 70%<br>• No scaling contraindicated</div> |
| </div> |
| |
| <div style="padding: 10px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Contraindications</div> |
| <div style="font-size: 11px; color: #b91c1c;">⛔ Scale during retry storm<br>⛔ Add capacity immediately<br>⛔ Restart during amplification</div> |
| </div> |
| |
| <div style="padding: 10px; background: #f8fafc; border-radius: 8px;"> |
| <div style="font-size: 12px; color: #64748b; margin-bottom: 5px;">Reversibility</div> |
| <div style="font-size: 11px; color: #047857;">✅ Backoff can be adjusted<br>✅ Coalescing can be disabled<br>✅ No stateful changes</div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Observation Gate Status --> |
| <div style="background: #fef3c7; border-radius: 10px; padding: 15px; border-left: 4px solid #f59e0b; margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="font-size: 20px;">⏳</div> |
| <div style="flex: 1;"> |
| <div style="font-size: 14px; font-weight: 600; color: #92400e; margin-bottom: 3px;"> |
| Observation Gate: ACTIVE (65.0% confidence) |
| </div> |
| <div style="font-size: 13px; color: #b45309;"> |
| System will observe for 5 minutes before proceeding to execution |
| </div> |
| </div> |
| </div> |
| |
| <div style="height: 8px; background: #e2e8f0; border-radius: 4px; margin: 10px 0; overflow: hidden;"> |
| <div style="width: 65%; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 4px;"></div> |
| </div> |
| |
| <div style="display: flex; justify-content: space-between;"> |
| <span style="font-size: 11px; color: #64748b;">0%</span> |
| <span style="font-size: 11px; color: #64748b; font-weight: 600;">Threshold: 70%</span> |
| <span style="font-size: 11px; color: #64748b;">100%</span> |
| </div> |
| </div> |
| |
| <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;"> |
| <div> |
| <div style="font-size: 12px; color: #64748b;">Next Step:</div> |
| <div style="font-size: 13px; color: #1e293b; font-weight: 500;">Wait for observation gate clearance</div> |
| </div> |
| <div style="display: flex; gap: 8px;"> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">📝 formal intent</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🔄 sequenced</span> |
| <span style="padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 12px; font-size: 11px; font-weight: 500;">🎯 87% confidence</span> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_oss_advisory_section() -> gr.HTML: |
| """Creates OSS advisory section showing policy vs execution boundary.""" |
| return gr.HTML(""" |
| <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid #0ea5e9;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(14, 165, 233, 0.2);"> |
| <div style="font-size: 32px;">🆓</div> |
| <div> |
| <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Policy Edition</h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;">Analysis & Advisory Only - Apache 2.0</p> |
| </div> |
| <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); |
| border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;"> |
| PERMANENTLY SAFE |
| </div> |
| </div> |
| |
| <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 HealingIntent Created</h4> |
| <span style="padding: 6px 12px; background: #dbeafe; color: #1d4ed8; border-radius: 8px; font-size: 12px; font-weight: bold;">94% confidence</span> |
| </div> |
| |
| <div style="margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ✅ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Action Recommended</div> |
| <div style="font-size: 13px; color: #1e293b;">Implement request coalescing with exponential backoff</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 🧠 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Pattern Match</div> |
| <div style="font-size: 13px; color: #1e293b;">Similar incident resolved with dampening (87% success rate)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ⚠️ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Contraindications</div> |
| <div style="font-size: 13px; color: #1e293b;">✅ Checked (retry amplification detected)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px;"> |
| <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 🔄 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Sequencing Rule</div> |
| <div style="font-size: 13px; color: #1e293b;">dampening_first_then_observe_then_optional_scale</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- OSS Boundary --> |
| <div style="text-align: center;"> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div> |
| <div style="padding: 10px; background: #fee2e2; color: #dc2626; border-radius: 10px; |
| font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #dc2626;"> |
| 🚫 OSS STOPS HERE - No Execution |
| </div> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div> |
| |
| <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;"> |
| <div style="font-size: 13px; color: #475569; font-weight: 500;"> |
| OSS provides policy advice only. Enterprise edition required for execution. |
| </div> |
| <div style="font-size: 12px; color: #64748b; margin-top: 5px;"> |
| This architectural boundary ensures safety by design. |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| def create_timeline_comparison_plot() -> go.Figure: |
| """Creates timeline comparison plot for incident resolution.""" |
| fig = go.Figure() |
| |
| |
| manual_times = [0, 5, 15, 30, 45, 60] |
| manual_users = [45000, 45000, 42000, 35000, 20000, 5000] |
| |
| arf_times = [0, 0.8, 1.5, 3, 8, 12] |
| arf_users = [45000, 45000, 45000, 42000, 15000, 0] |
| |
| |
| fig.add_trace(go.Scatter( |
| x=manual_times, |
| y=manual_users, |
| mode='lines+markers', |
| name='Manual Resolution', |
| line=dict(color='#ef4444', width=3, dash='dash'), |
| marker=dict(size=8, color='#ef4444'), |
| hovertemplate='Time: %{x}min<br>Users Affected: %{y:,}<extra></extra>' |
| )) |
| |
| fig.add_trace(go.Scatter( |
| x=arf_times, |
| y=arf_users, |
| mode='lines+markers', |
| name='ARF Policy Execution', |
| line=dict(color='#10b981', width=4), |
| marker=dict(size=10, color='#10b981'), |
| hovertemplate='Time: %{x}min<br>Users Affected: %{y:,}<extra></extra>' |
| )) |
| |
| |
| fig.add_vline(x=0.8, line_width=2, line_dash="dot", line_color="#3b82f6", |
| annotation_text="Detection", annotation_position="top right") |
| fig.add_vline(x=1.5, line_width=2, line_dash="dot", line_color="#8b5cf6", |
| annotation_text="Recall", annotation_position="top right") |
| fig.add_vline(x=3, line_width=2, line_dash="dot", line_color="#f59e0b", |
| annotation_text="Decision", annotation_position="top right") |
| fig.add_vline(x=8, line_width=2, line_dash="dot", line_color="#10b981", |
| annotation_text="Resolution", annotation_position="top right") |
| |
| |
| fig.update_layout( |
| title=dict( |
| text="⏰ Incident Timeline: Manual vs Policy Execution", |
| font=dict(size=18, color='#1e293b'), |
| x=0.5 |
| ), |
| xaxis=dict( |
| title="Time (minutes)", |
| gridcolor='#e2e8f0', |
| tickformat=',d' |
| ), |
| yaxis=dict( |
| title="Users Affected", |
| gridcolor='#e2e8f0', |
| tickformat=',' |
| ), |
| plot_bgcolor='white', |
| paper_bgcolor='white', |
| font=dict(family="Inter, sans-serif", color="#475569"), |
| hovermode='x unified', |
| legend=dict( |
| orientation="h", |
| yanchor="bottom", |
| y=1.02, |
| xanchor="center", |
| x=0.5, |
| bgcolor='rgba(255, 255, 255, 0.8)', |
| bordercolor='#e2e8f0', |
| borderwidth=1 |
| ), |
| margin=dict(l=50, r=50, t=80, b=50), |
| height=400 |
| ) |
| |
| |
| fig.add_annotation( |
| x=12, |
| y=0, |
| text="🚀 73% faster resolution<br>💰 $6.3K saved", |
| showarrow=True, |
| arrowhead=2, |
| arrowsize=1, |
| arrowwidth=2, |
| arrowcolor="#10b981", |
| ax=50, |
| ay=-50, |
| bgcolor="#f0fdf4", |
| bordercolor="#10b981", |
| borderwidth=2, |
| font=dict(size=12, color="#065f46") |
| ) |
| |
| return fig |
|
|
| |
| |
| |
| def render_observation_gate(healing_intent: Dict[str, Any]) -> gr.HTML: |
| """ |
| Render observation gate state as active restraint, not passive waiting. |
| Doctrinal: Make inaction an explicit, powerful decision. |
| """ |
| deferral_reason = healing_intent.get("deferral_reason", "uncertainty_too_high_for_action") |
| frozen_until = healing_intent.get("decision_frozen_until", "") |
| confidence = healing_intent.get("confidence", 0.0) |
| |
| |
| countdown_text = "" |
| if frozen_until: |
| try: |
| frozen_dt = datetime.datetime.fromisoformat(frozen_until.replace("Z", "+00:00")) |
| now = datetime.datetime.now(datetime.timezone.utc) |
| if frozen_dt.tzinfo is None: |
| frozen_dt = frozen_dt.replace(tzinfo=datetime.timezone.utc) |
| time_left = frozen_dt - now |
| minutes_left = max(0, int(time_left.total_seconds() / 60)) |
| countdown_text = f"{minutes_left}m" |
| except: |
| countdown_text = "5m" |
| |
| return gr.HTML(f""" |
| <div style="border: 3px solid #3b82f6; border-radius: 16px; padding: 25px; background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-bottom: 20px;"> |
| <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;"> |
| <div style="font-size: 40px; color: #3b82f6;">⏳</div> |
| <div style="flex: 1;"> |
| <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;"> |
| Decision Intentionally Deferred |
| </h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;"> |
| System state: <strong>observe_only</strong> • Confidence: {confidence:.1%} |
| </p> |
| </div> |
| <div style="padding: 10px 20px; background: #dbeafe; color: #1e40af; border-radius: 25px; font-size: 14px; font-weight: bold;"> |
| ACTIVE RESTRAINT |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;"> |
| <div style="padding: 18px; background: #f8fafc; border-radius: 12px;"> |
| <div style="font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 600;">REASON FOR DEFERRAL</div> |
| <div style="font-size: 15px; color: #1e293b; font-weight: 500; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #3b82f6;"> |
| {deferral_reason.replace('_', ' ').title()} |
| </div> |
| </div> |
| |
| <div style="padding: 18px; background: #f8fafc; border-radius: 12px;"> |
| <div style="font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 600;">NEXT EVALUATION</div> |
| <div style="font-size: 15px; color: #1e293b; font-weight: 500; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #10b981;"> |
| System re-evaluates in: <span style="font-size: 24px; font-weight: 700; color: #10b981;">{countdown_text}</span> |
| </div> |
| </div> |
| </div> |
| |
| <div style="background: #f0fdf4; border-radius: 12px; padding: 20px; border: 2px solid #10b981;"> |
| <div style="display: flex; align-items: flex-start; gap: 15px;"> |
| <div style="font-size: 24px; color: #10b981;">🎯</div> |
| <div style="flex: 1;"> |
| <div style="font-size: 16px; font-weight: 600; color: #065f46; margin-bottom: 8px;"> |
| This is a System Choice, Not a Limitation |
| </div> |
| <div style="font-size: 14px; color: #047857; line-height: 1.6;"> |
| The system is <strong>choosing not to act</strong> because uncertainty exceeds policy thresholds. |
| This restraint demonstrates operational maturity—eagerness is a liability in production. |
| <br><br> |
| <em>"What you are seeing is not waiting. It is judgment under uncertainty."</em> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0;"> |
| <div style="font-size: 14px; color: #64748b; font-weight: 600; margin-bottom: 10px;">PREVENTED ACTIONS (CONTRANDICATED)</div> |
| <div style="display: flex; flex-wrap: wrap; gap: 10px;"> |
| <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">scale_during_retry_storm</span> |
| <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">add_capacity_during_amplification</span> |
| <span style="padding: 8px 16px; background: #fee2e2; color: #7f1d1d; border-radius: 20px; font-size: 13px; font-weight: 500;">any_action_during_high_uncertainty</span> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| |
| |
| |
| def create_historical_evidence_panel(scenario_data: Dict[str, Any]) -> gr.HTML: |
| """ |
| Create doctrinally compliant historical evidence panel. |
| Must be visually dominant with dates/environments. |
| """ |
| |
| historical_panel = scenario_data.get("historical_evidence_panel", {}) |
| |
| scaling_failures = historical_panel.get("scaling_first_failures", []) |
| dampening_successes = historical_panel.get("dampening_first_successes", []) |
| |
| |
| failures_html = "" |
| for i, failure in enumerate(scaling_failures[:3]): |
| failures_html += f""" |
| <div style="border-left: 4px solid #ef4444; padding-left: 15px; margin-bottom: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px;"> |
| <div style="font-size: 14px; font-weight: 600; color: #1e293b;">{failure.get('date', 'Unknown')} • {failure.get('environment', 'Unknown')}</div> |
| <div style="padding: 3px 10px; background: #fee2e2; color: #dc2626; border-radius: 12px; font-size: 11px; font-weight: bold;">FAILED</div> |
| </div> |
| <div style="font-size: 13px; color: #475569; margin-bottom: 5px;"> |
| <strong>Action:</strong> {failure.get('action', 'Unknown')} |
| </div> |
| <div style="font-size: 13px; color: #dc2626; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> {failure.get('outcome', 'Unknown')} |
| </div> |
| <div style="font-size: 12px; color: #7f1d1d; font-style: italic; background: #fef2f2; padding: 8px; border-radius: 6px;"> |
| {failure.get('lesson', 'No lesson captured')} |
| </div> |
| </div> |
| """ |
| |
| |
| successes_html = "" |
| for i, success in enumerate(dampening_successes[:3]): |
| successes_html += f""" |
| <div style="border-left: 4px solid #10b981; padding-left: 15px; margin-bottom: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px;"> |
| <div style="font-size: 14px; font-weight: 600; color: #1e293b;">{success.get('date', 'Unknown')} • {success.get('environment', 'Unknown')}</div> |
| <div style="padding: 3px 10px; background: #dcfce7; color: #166534; border-radius: 12px; font-size: 11px; font-weight: bold;">SUCCESS</div> |
| </div> |
| <div style="font-size: 13px; color: #475569; margin-bottom: 5px;"> |
| <strong>Action:</strong> {success.get('action', 'Unknown')} |
| </div> |
| <div style="font-size: 13px; color: #10b981; font-weight: 500; margin-bottom: 3px;"> |
| <strong>Outcome:</strong> {success.get('outcome', 'Unknown')} |
| </div> |
| <div style="font-size: 12px; color: #065f46; font-style: italic; background: #f0fdf4; padding: 8px; border-radius: 6px;"> |
| {success.get('lesson', 'No lesson captured')} |
| </div> |
| </div> |
| """ |
| |
| return gr.HTML(f""" |
| <div style="border: 3px solid #3b82f6; border-radius: 16px; padding: 25px; margin-bottom: 25px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;"> |
| <div> |
| <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #1e293b; font-weight: 700;"> |
| 🧠 Historical Evidence (Why Sequencing Matters) |
| </h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;"> |
| Real outcomes from similar incidents—this evidence dominates decision logic |
| </p> |
| </div> |
| <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| RECALL DOMINANCE: POLICY OVER PREDICTION |
| </div> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px;"> |
| <div> |
| <div style="font-size: 16px; font-weight: 600; color: #dc2626; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;"> |
| <span>⛔</span> Scaling-First Failures |
| </div> |
| {failures_html if failures_html else """ |
| <div style="padding: 20px; background: #fef2f2; border-radius: 10px; text-align: center;"> |
| <div style="font-size: 32px; color: #dc2626; margin-bottom: 10px;">📊</div> |
| <div style="font-size: 14px; color: #7f1d1d;">No scaling failure evidence in memory</div> |
| </div> |
| """} |
| </div> |
| |
| <div> |
| <div style="font-size: 16px; font-weight: 600; color: #10b981; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;"> |
| <span>✅</span> Dampening-First Successes |
| </div> |
| {successes_html if successes_html else """ |
| <div style="padding: 20px; background: #f0fdf4; border-radius: 10px; text-align: center;"> |
| <div style="font-size: 32px; color: #10b981; margin-bottom: 10px;">📊</div> |
| <div style="font-size: 14px; color: #065f46;">No dampening success evidence in memory</div> |
| </div> |
| """} |
| </div> |
| </div> |
| |
| <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12px; padding: 20px; border: 2px solid #0ea5e9;"> |
| <div style="display: flex; align-items: flex-start; gap: 15px;"> |
| <div style="font-size: 28px; color: #0ea5e9;">🎯</div> |
| <div style="flex: 1;"> |
| <div style="font-size: 16px; font-weight: 600; color: #0369a1; margin-bottom: 8px;"> |
| Doctrinal Principle: Memory Dominates Models |
| </div> |
| <div style="font-size: 14px; color: #0c4a6e; line-height: 1.6;"> |
| The system prioritizes <strong>historical evidence over predictive confidence</strong>. |
| If scaling-first failed in similar conditions, scaling is contraindicated regardless of model confidence. |
| <br><br> |
| <em>"What happened is more important than what might happen."</em> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
|
|
| |
| |
| |
| |
| def update_performance_metrics(scenario_name: str, scenarios=INCIDENT_SCENARIOS) -> tuple: |
| """ |
| Update performance metrics based on scenario |
| Returns: (detection_time_html, recall_quality_html, confidence_score_html, sequencing_stage_html) |
| MUST MATCH what app.py demo_btn.click() expects! |
| """ |
| |
| |
| metrics_config = { |
| "Cache": { |
| "detection_time": ("45s", "89% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"), |
| "recall_quality": ("92%", "85% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"), |
| "confidence_score": ("87%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"), |
| "sequencing_stage": ("Dampening", "Step 1/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"), |
| "savings_multiplier": 0.85 |
| }, |
| "Database": { |
| "detection_time": ("38s", "91% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"), |
| "recall_quality": ("89%", "82% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"), |
| "confidence_score": ("84%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"), |
| "sequencing_stage": ("Concurrency", "Step 2/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"), |
| "savings_multiplier": 0.82 |
| }, |
| "Kubernetes": { |
| "detection_time": ("52s", "87% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"), |
| "recall_quality": ("91%", "84% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"), |
| "confidence_score": ("86%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"), |
| "sequencing_stage": ("Observe", "Step 3/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"), |
| "savings_multiplier": 0.83 |
| }, |
| "Network": { |
| "detection_time": ("28s", "93% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"), |
| "recall_quality": ("94%", "88% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"), |
| "confidence_score": ("89%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"), |
| "sequencing_stage": ("Scale", "Step 4/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"), |
| "savings_multiplier": 0.88 |
| }, |
| "Default": { |
| "detection_time": ("42s", "90% faster", "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)"), |
| "recall_quality": ("90%", "85% accuracy", "linear-gradient(135deg, #10b981 0%, #047857 100%)"), |
| "confidence_score": ("85%", "High certainty", "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)"), |
| "sequencing_stage": ("Dampening", "Step 1/4", "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"), |
| "savings_multiplier": 0.85 |
| } |
| } |
| |
| |
| scenario_type = "Default" |
| for key in ["Cache", "Database", "Kubernetes", "Network", "Storage"]: |
| if key.lower() in scenario_name.lower(): |
| scenario_type = key |
| break |
| |
| |
| metrics = metrics_config.get(scenario_type, metrics_config["Default"]) |
| |
| |
| detection_time_html = f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; |
| border-left: 4px solid; border-image: {metrics['detection_time'][2]}; border-image-slice: 1;"> |
| <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div> |
| <div> |
| <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4> |
| <p style="font-size: 28px; font-weight: bold; background: {metrics['detection_time'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['detection_time'][0]}</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['detection_time'][1]} than baseline</p> |
| </div> |
| </div> |
| """ |
| |
| recall_quality_html = f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; |
| border-left: 4px solid; border-image: {metrics['recall_quality'][2]}; border-image-slice: 1;"> |
| <div style="font-size: 28px; margin-bottom: 10px;">🧠</div> |
| <div> |
| <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Recall Quality</h4> |
| <p style="font-size: 28px; font-weight: bold; background: {metrics['recall_quality'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['recall_quality'][0]}</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['recall_quality'][1]}</p> |
| </div> |
| </div> |
| """ |
| |
| confidence_score_html = f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; |
| border-left: 4px solid; border-image: {metrics['confidence_score'][2]}; border-image-slice: 1;"> |
| <div style="font-size: 28px; margin-bottom: 10px;">🎯</div> |
| <div> |
| <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Confidence Score</h4> |
| <p style="font-size: 28px; font-weight: bold; background: {metrics['confidence_score'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['confidence_score'][0]}</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['confidence_score'][1]}</p> |
| </div> |
| </div> |
| """ |
| |
| sequencing_stage_html = f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; |
| border-left: 4px solid; border-image: {metrics['sequencing_stage'][2]}; border-image-slice: 1;"> |
| <div style="font-size: 28px; margin-bottom: 10px;">🔁</div> |
| <div> |
| <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Sequencing Stage</h4> |
| <p style="font-size: 28px; font-weight: bold; background: {metrics['sequencing_stage'][2]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0;">{metrics['sequencing_stage'][0]}</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">{metrics['sequencing_stage'][1]}</p> |
| </div> |
| </div> |
| """ |
| |
| logger.info(f"✅ Updated performance metrics for {scenario_name} ({scenario_type} type)") |
| return detection_time_html, recall_quality_html, confidence_score_html, sequencing_stage_html |
|
|
| |
| def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple: |
| """ |
| Create doctrinally compliant incident demo tab. |
| Doctrinal: Language discipline, sequencing display, no early "critical" |
| """ |
| |
| |
| default_scenario_data = scenarios.get(default_scenario, {}) |
| business_impact = default_scenario_data.get("business_impact", {}) |
| metrics = default_scenario_data.get("metrics", {}) |
| |
| with gr.Row(): |
| |
| with gr.Column(scale=1, variant="panel") as left_col: |
| |
| scenario_dropdown = gr.Dropdown( |
| choices=list(scenarios.keys()), |
| value=default_scenario, |
| label="🎯 Select Variance Scenario", |
| info="Choose a production variance pattern to analyze", |
| interactive=True, |
| container=False |
| ) |
| |
| |
| historical_panel = create_historical_evidence_panel(default_scenario_data) |
| |
| |
| scenario_card = gr.HTML(f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;"> |
| <h3 style="margin: 0; font-size: 18px; color: #1e293b;">📊 {default_scenario}</h3> |
| <span style="padding: 4px 12px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH_VARIANCE')}</span> |
| </div> |
| <div style="margin-top: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Users Affected:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span> |
| <span style="font-size: 14px; color: #f59e0b; font-weight: 700;">${business_impact.get('revenue_risk_per_hour', 0):,}/hour</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (Policy System)</span> |
| </div> |
| <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;"> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">variance</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">pattern</span> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| telemetry_header = gr.Markdown("### 📈 Live Telemetry") |
| telemetry_viz = gr.Plot( |
| label="", |
| show_label=False, |
| elem_id="telemetry_plot" |
| ) |
| |
| with gr.Column(scale=1): |
| impact_header = gr.Markdown("### 💰 Business Impact") |
| impact_viz = gr.Plot( |
| label="", |
| show_label=False, |
| elem_id="impact_plot" |
| ) |
| |
| |
| with gr.Column(scale=2, variant="panel") as middle_col: |
| |
| observation_gate_placeholder = create_observation_gate_placeholder() |
| |
| |
| sequencing_header = gr.Markdown("### 🔄 Sequencing Logic: Dampening → Concurrency → Observe → Scale") |
| sequencing_panel = create_sequencing_visualization() |
| |
| |
| workflow_header = gr.Markdown("## 🔄 Policy Process Workflow") |
| workflow_subheader = gr.Markdown("### How the system transforms variance into policy execution") |
| |
| |
| with gr.Row(): |
| detection_process = create_detection_display() |
| recall_process = create_recall_display() |
| decision_process = create_decision_display() |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| approval_toggle = gr.CheckboxGroup( |
| choices=["👤 Require Human Approval"], |
| label="Safety Controls", |
| value=[], |
| info="Toggle human oversight" |
| ) |
| |
| with gr.Column(scale=2): |
| mcp_mode = gr.Radio( |
| choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"], |
| value="🛡️ Advisory (OSS Only)", |
| label="Policy Safety Mode", |
| info="Control execution safety level", |
| interactive=True |
| ) |
| |
| |
| boundary_header = gr.Markdown("### 🎭 Policy vs Execution: The Safety Boundary") |
| |
| with gr.Row(): |
| oss_section = create_oss_advisory_section() |
| |
| enterprise_section = gr.HTML(""" |
| <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 2px solid #10b981;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(16, 185, 129, 0.2);"> |
| <div style="font-size: 32px;">💰</div> |
| <div> |
| <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Execution Edition</h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;">Full Execution & Learning - Commercial</p> |
| </div> |
| <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); |
| border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;"> |
| REQUIRES LICENSE |
| </div> |
| </div> |
| |
| <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4> |
| <span style="padding: 6px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span> |
| </div> |
| |
| <div style="margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ⚙️ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Mode</div> |
| <div style="font-size: 13px; color: #1e293b;">Autonomous (Requires Enterprise license)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ⚡ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Expected Recovery</div> |
| <div style="font-size: 13px; color: #1e293b;">12 minutes (vs 45 min manual)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 💰 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Cost Avoided</div> |
| <div style="font-size: 13px; color: #10b981; font-weight: 700;">$6,375</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px;"> |
| <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 👥 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Users Protected</div> |
| <div style="font-size: 13px; color: #1e293b;">45,000 → 0 impacted</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Enterprise Boundary --> |
| <div style="text-align: center;"> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| <div style="padding: 10px; background: #dcfce7; color: #166534; border-radius: 10px; |
| font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #10b981;"> |
| ✅ Enterprise executes with MCP safety |
| </div> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| |
| <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;"> |
| <div style="font-size: 13px; color: #475569; font-weight: 500;"> |
| Enterprise edition adds execution, learning, and safety guarantees. |
| </div> |
| <div style="font-size: 12px; color: #64748b; margin-top: 5px;"> |
| MCP safety modes: Advisory → Approval → Autonomous |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| oss_btn = gr.Button( |
| "🆓 Run Policy Analysis", |
| variant="secondary", |
| size="lg" |
| ) |
| oss_info = gr.Markdown("*Free, policy-only analysis*") |
| |
| with gr.Column(scale=1): |
| enterprise_btn = gr.Button( |
| "💰 Execute Enterprise Healing", |
| variant="primary", |
| size="lg" |
| ) |
| enterprise_info = gr.Markdown("*Requires Enterprise license*") |
| |
| |
| timeline_header = gr.Markdown("### ⏰ Incident Timeline") |
| timeline_viz = gr.Plot( |
| create_timeline_comparison_plot(), |
| label="", |
| show_label=False, |
| elem_id="timeline_plot" |
| ) |
| |
| |
| with gr.Column(scale=1, variant="panel") as right_col: |
| |
| metrics_header = gr.Markdown("## 📊 Performance Metrics") |
| |
| |
| detection_time = gr.HTML() |
| recall_quality = gr.HTML() |
| confidence_score = gr.HTML() |
| sequencing_stage = gr.HTML() |
| |
| |
| oss_results_header = gr.Markdown("### 🆓 Policy Analysis Results") |
| oss_results_display = gr.JSON( |
| label="", |
| value={ |
| "status": "Analysis Pending", |
| "processes": ["Detection", "Recall", "Decision"], |
| "mode": "Advisory Only", |
| "action": "Generate Formal HealingIntent" |
| }, |
| height=200 |
| ) |
| |
| enterprise_results_header = gr.Markdown("### 💰 Execution Results") |
| enterprise_results_display = gr.JSON( |
| label="", |
| value={ |
| "status": "Execution Pending", |
| "requires_license": True, |
| "available_modes": ["Approval", "Autonomous"], |
| "expected_outcome": "12m MTTR, $6.3K saved" |
| }, |
| height=200 |
| ) |
| |
| |
| approval_display = gr.HTML(""" |
| <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4> |
| <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span> |
| </div> |
| <div style="margin-top: 15px;"> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (Policy Only)</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p> |
| <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;"> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. System generates formal HealingIntent</div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves contraindications</div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. System executes with sequencing constraints</div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| demo_btn = gr.Button( |
| "▶️ Run Complete Walkthrough", |
| variant="secondary", |
| size="lg" |
| ) |
| demo_info = gr.Markdown("*Experience the full workflow from detection to resolution*") |
| |
| |
| return ( |
| |
| scenario_dropdown, historical_panel, scenario_card, telemetry_viz, impact_viz, |
| |
| observation_gate_placeholder, sequencing_panel, workflow_header, detection_process, |
| recall_process, decision_process, oss_section, enterprise_section, oss_btn, enterprise_btn, |
| approval_toggle, mcp_mode, timeline_viz, |
| |
| detection_time, recall_quality, confidence_score, sequencing_stage, |
| oss_results_display, enterprise_results_display, approval_display, demo_btn |
| ) |
| |
| |
| |
| def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple: |
| """ |
| Create doctrinally compliant incident demo tab. |
| Doctrinal: Language discipline, sequencing display, no early "critical" |
| """ |
| |
| |
| default_scenario_data = scenarios.get(default_scenario, {}) |
| business_impact = default_scenario_data.get("business_impact", {}) |
| metrics = default_scenario_data.get("metrics", {}) |
| |
| with gr.Row(): |
| |
| with gr.Column(scale=1, variant="panel") as left_col: |
| |
| scenario_dropdown = gr.Dropdown( |
| choices=list(scenarios.keys()), |
| value=default_scenario, |
| label="🎯 Select Variance Scenario", |
| info="Choose a production variance pattern to analyze", |
| interactive=True, |
| container=False |
| ) |
| |
| |
| historical_panel = create_historical_evidence_panel(default_scenario_data) |
| |
| |
| scenario_card = gr.HTML(f""" |
| <div style="border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;"> |
| <h3 style="margin: 0; font-size: 18px; color: #1e293b;">📊 {default_scenario}</h3> |
| <span style="padding: 4px 12px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH_VARIANCE')}</span> |
| </div> |
| <div style="margin-top: 15px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Users Affected:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span> |
| <span style="font-size: 14px; color: #f59e0b; font-weight: 700;">${business_impact.get('revenue_risk_per_hour', 0):,}/hour</span> |
| </div> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;"> |
| <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span> |
| <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (Policy System)</span> |
| </div> |
| <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;"> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">variance</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span> |
| <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">pattern</span> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| telemetry_header = gr.Markdown("### 📈 Live Telemetry") |
| telemetry_viz = gr.Plot( |
| label="", |
| show_label=False, |
| elem_id="telemetry_plot" |
| ) |
| |
| with gr.Column(scale=1): |
| impact_header = gr.Markdown("### 💰 Business Impact") |
| impact_viz = gr.Plot( |
| label="", |
| show_label=False, |
| elem_id="impact_plot" |
| ) |
| |
| |
| with gr.Column(scale=2, variant="panel") as middle_col: |
| |
| observation_gate_placeholder = create_observation_gate_placeholder() |
| |
| |
| sequencing_header = gr.Markdown("### 🔄 Sequencing Logic: Dampening → Concurrency → Observe → Scale") |
| sequencing_panel = create_sequencing_visualization() |
| |
| |
| workflow_header = gr.Markdown("## 🔄 Policy Process Workflow") |
| workflow_subheader = gr.Markdown("### How the system transforms variance into policy execution") |
| |
| |
| with gr.Row(): |
| detection_process = create_detection_display() |
| recall_process = create_recall_display() |
| decision_process = create_decision_display() |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| approval_toggle = gr.CheckboxGroup( |
| choices=["👤 Require Human Approval"], |
| label="Safety Controls", |
| value=[], |
| info="Toggle human oversight" |
| ) |
| |
| with gr.Column(scale=2): |
| mcp_mode = gr.Radio( |
| choices=["🛡️ Advisory (OSS Only)", "👥 Approval", "⚡ Autonomous"], |
| value="🛡️ Advisory (OSS Only)", |
| label="Policy Safety Mode", |
| info="Control execution safety level", |
| interactive=True |
| ) |
| |
| |
| boundary_header = gr.Markdown("### 🎭 Policy vs Execution: The Safety Boundary") |
| |
| with gr.Row(): |
| oss_section = create_oss_advisory_section() |
| |
| enterprise_section = gr.HTML(""" |
| <div style="padding: 25px; border-radius: 16px; margin-bottom: 15px; flex: 1; min-height: 320px; |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 2px solid #10b981;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid rgba(16, 185, 129, 0.2);"> |
| <div style="font-size: 32px;">💰</div> |
| <div> |
| <h3 style="margin: 0 0 5px 0; font-size: 20px; color: #1e293b;">Execution Edition</h3> |
| <p style="margin: 0; font-size: 14px; color: #64748b;">Full Execution & Learning - Commercial</p> |
| </div> |
| <div style="margin-left: auto; padding: 6px 14px; background: rgba(255, 255, 255, 0.9); |
| border-radius: 10px; font-size: 11px; font-weight: bold; color: #475569;"> |
| REQUIRES LICENSE |
| </div> |
| </div> |
| |
| <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4> |
| <span style="padding: 6px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span> |
| </div> |
| |
| <div style="margin-bottom: 15px;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #3b82f6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ⚙️ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Mode</div> |
| <div style="font-size: 13px; color: #1e293b;">Autonomous (Requires Enterprise license)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #10b981; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| ⚡ |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Expected Recovery</div> |
| <div style="font-size: 13px; color: #1e293b;">12 minutes (vs 45 min manual)</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;"> |
| <div style="width: 24px; height: 24px; background: #f59e0b; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 💰 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Cost Avoided</div> |
| <div style="font-size: 13px; color: #10b981; font-weight: 700;">$6,375</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; align-items: center; gap: 10px;"> |
| <div style="width: 24px; height: 24px; background: #8b5cf6; color: white; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; font-size: 12px;"> |
| 👥 |
| </div> |
| <div> |
| <div style="font-size: 14px; color: #475569; font-weight: 500;">Users Protected</div> |
| <div style="font-size: 13px; color: #1e293b;">45,000 → 0 impacted</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Enterprise Boundary --> |
| <div style="text-align: center;"> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| <div style="padding: 10px; background: #dcfce7; color: #166534; border-radius: 10px; |
| font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #10b981;"> |
| ✅ Enterprise executes with MCP safety |
| </div> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| |
| <div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.8); border-radius: 10px;"> |
| <div style="font-size: 13px; color: #475569; font-weight: 500;"> |
| Enterprise edition adds execution, learning, and safety guarantees. |
| </div> |
| <div style="font-size: 12px; color: #64748b; margin-top: 5px;"> |
| MCP safety modes: Advisory → Approval → Autonomous |
| </div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| oss_btn = gr.Button( |
| "🆓 Run Policy Analysis", |
| variant="secondary", |
| size="lg" |
| ) |
| oss_info = gr.Markdown("*Free, policy-only analysis*") |
| |
| with gr.Column(scale=1): |
| enterprise_btn = gr.Button( |
| "💰 Execute Enterprise Healing", |
| variant="primary", |
| size="lg" |
| ) |
| enterprise_info = gr.Markdown("*Requires Enterprise license*") |
| |
| |
| timeline_header = gr.Markdown("### ⏰ Incident Timeline") |
| timeline_viz = gr.Plot( |
| create_timeline_comparison_plot(), |
| label="", |
| show_label=False, |
| elem_id="timeline_plot" |
| ) |
| |
| |
| with gr.Column(scale=1, variant="panel") as right_col: |
| |
| metrics_header = gr.Markdown("## 📊 Performance Metrics") |
| |
| |
| detection_time = gr.HTML() |
| mttr = gr.HTML() |
| auto_heal = gr.HTML() |
| savings = gr.HTML() |
| |
| |
| oss_results_header = gr.Markdown("### 🆓 Policy Analysis Results") |
| oss_results_display = gr.JSON( |
| label="", |
| value={ |
| "status": "Analysis Pending", |
| "processes": ["Detection", "Recall", "Decision"], |
| "mode": "Advisory Only", |
| "action": "Generate Formal HealingIntent" |
| }, |
| height=200 |
| ) |
| |
| enterprise_results_header = gr.Markdown("### 💰 Execution Results") |
| enterprise_results_display = gr.JSON( |
| label="", |
| value={ |
| "status": "Execution Pending", |
| "requires_license": True, |
| "available_modes": ["Approval", "Autonomous"], |
| "expected_outcome": "12m MTTR, $6.3K saved" |
| }, |
| height=200 |
| ) |
| |
| |
| approval_display = gr.HTML(""" |
| <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4> |
| <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span> |
| </div> |
| <div style="margin-top: 15px;"> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (Policy Only)</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569; font-style: italic;">Switch to "Approval" mode to enable human-in-the-loop workflows</p> |
| <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;"> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. System generates formal HealingIntent</div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves contraindications</div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. System executes with sequencing constraints</div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| demo_btn = gr.Button( |
| "▶️ Run Complete Walkthrough", |
| variant="secondary", |
| size="lg" |
| ) |
| demo_info = gr.Markdown("*Experience the full workflow from detection to resolution*") |
| |
| |
| return ( |
| |
| scenario_dropdown, historical_panel, scenario_card, telemetry_viz, impact_viz, |
| |
| observation_gate_placeholder, sequencing_panel, workflow_header, detection_process, |
| recall_process, decision_process, oss_section, enterprise_section, oss_btn, enterprise_btn, |
| approval_toggle, mcp_mode, timeline_viz, |
| |
| detection_time, mttr, auto_heal, savings, |
| oss_results_display, enterprise_results_display, approval_display, demo_btn |
| |
| ) |
|
|
| |
| |
| |
| def create_realism_panel(scenario_data: Dict, scenario_name: str) -> gr.HTML: |
| """ |
| Create doctrinally compliant realism panel. |
| Updated to show formal HealingIntent fields and sequencing logic. |
| """ |
| ranked_actions = scenario_data.get("ranked_actions", []) |
| |
| |
| actions_html = "" |
| for action in ranked_actions: |
| category = action.get("category", "unknown") |
| category_color = { |
| "dampening": "#3b82f6", |
| "concurrency_control": "#10b981", |
| "observation": "#8b5cf6", |
| "scaling": "#f59e0b" |
| }.get(category, "#64748b") |
| |
| rank_color = "#3b82f6" if action["rank"] == 1 else "#f59e0b" if action["rank"] == 2 else "#64748b" |
| status = "✅ RECOMMENDED" if action["rank"] == 1 else "🟡 SECONDARY" if action["rank"] == 2 else "🔴 CONTRAINDICATED" |
| |
| |
| preconditions_html = "" |
| if action.get("preconditions"): |
| preconditions_html = f""" |
| <div style="margin-top: 10px; padding: 10px; background: #f8fafc; border-radius: 8px; border-left: 3px solid #3b82f6;"> |
| <div style="font-size: 12px; color: #475569; font-weight: 600; margin-bottom: 5px;">Preconditions:</div> |
| {"".join([f'<div style="font-size: 11px; color: #64748b; margin-bottom: 3px;">• {pre}</div>' for pre in action["preconditions"]])} |
| </div> |
| """ |
| |
| contraindications_html = "" |
| if action.get("contraindicated_actions"): |
| contraindications_html = f""" |
| <div style="margin-top: 10px; padding: 10px; background: #fef2f2; border-radius: 8px; border-left: 3px solid #ef4444;"> |
| <div style="font-size: 12px; color: #7f1d1d; font-weight: 600; margin-bottom: 5px;">Contraindicated Actions:</div> |
| {"".join([f'<div style="font-size: 11px; color: #b91c1c; margin-bottom: 3px;">⛔ {contra}</div>' for contra in action["contraindicated_actions"]])} |
| </div> |
| """ |
| |
| reversibility_html = "" |
| if action.get("reversibility_statement"): |
| reversibility_html = f""" |
| <div style="margin-top: 10px; padding: 10px; background: #f0fdf4; border-radius: 8px; border-left: 3px solid #10b981;"> |
| <div style="font-size: 12px; color: #065f46; font-weight: 600; margin-bottom: 5px;">Reversibility Statement:</div> |
| <div style="font-size: 11px; color: #047857;">{action["reversibility_statement"]}</div> |
| </div> |
| """ |
| |
| historical_evidence_html = "" |
| if action.get("historical_evidence"): |
| historical_evidence_html = f""" |
| <div style="margin-top: 10px; padding: 10px; background: #fef3c7; border-radius: 8px; border-left: 3px solid #f59e0b;"> |
| <div style="font-size: 12px; color: #92400e; font-weight: 600; margin-bottom: 5px;">Historical Evidence:</div> |
| {"".join([f'<div style="font-size: 11px; color: #b45309; margin-bottom: 3px;">📊 {evidence}</div>' for evidence in action["historical_evidence"]])} |
| </div> |
| """ |
| |
| actions_html += f""" |
| <div style="border: 2px solid {category_color}; border-radius: 12px; padding: 16px; |
| background: {category_color}10; margin-bottom: 12px;"> |
| <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;"> |
| <div style="flex: 1;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;"> |
| <div style="width: 24px; height: 24px; background: {category_color}; |
| color: white; border-radius: 50%; display: flex; align-items: center; |
| justify-content: center; font-size: 12px; font-weight: bold;"> |
| {action['rank']} |
| </div> |
| <span style="font-size: 14px; font-weight: 600; color: #1e293b;"> |
| {status} • {action.get('confidence', 0)}% confidence |
| </span> |
| <span style="padding: 3px 8px; background: {category_color}30; color: {category_color}; border-radius: 12px; font-size: 11px; font-weight: bold;"> |
| {category.upper().replace('_', ' ')} |
| </span> |
| </div> |
| <p style="font-size: 14px; color: #475569; margin: 8px 0; font-weight: 500;"> |
| {action.get('action', 'No action specified')} |
| </p> |
| </div> |
| <div style="padding: 6px 12px; background: {category_color}20; border-radius: 20px; |
| font-size: 12px; font-weight: bold; color: {category_color};"> |
| {action.get('confidence', 0)}% |
| </div> |
| </div> |
| |
| {preconditions_html} |
| {contraindications_html} |
| {reversibility_html} |
| {historical_evidence_html} |
| |
| <div style="margin-top: 10px; font-size: 12px; color: #64748b;"> |
| <strong>Sequencing:</strong> {action.get('category', 'unknown').replace('_', ' ')} • {action.get('constraints', ['No constraints'])[0]} |
| </div> |
| </div> |
| """ |
| |
| |
| full_html = f""" |
| <div style="border: 2px solid #3b82f6; border-radius: 16px; padding: 25px; |
| background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%); margin-top: 20px;"> |
| |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> |
| <div> |
| <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #1e293b; font-weight: 700;"> |
| 🎯 Formal HealingIntent Sequence |
| </h3> |
| <p style="margin: 0; font-size: 13px; color: #64748b;"> |
| Policy-generated intents with preconditions, contraindications, and reversibility statements |
| </p> |
| </div> |
| <div style="padding: 8px 16px; background: #dbeafe; color: #1e40af; |
| border-radius: 20px; font-size: 12px; font-weight: bold;"> |
| DOCTRINAL COMPLIANCE v3.3.9+ |
| </div> |
| </div> |
| |
| {actions_html if actions_html else '<div style="text-align: center; padding: 30px; color: #64748b;">No ranked actions available</div>'} |
| |
| <!-- Doctrinal Sequencing Summary --> |
| <div style="margin-top: 25px; padding-top: 20px; border-top: 2px solid #e2e8f0;"> |
| <div style="font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 15px;"> |
| 🔄 Doctrinal Sequencing Enforcement |
| </div> |
| <div style="background: #f8fafc; border-radius: 12px; padding: 20px;"> |
| <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center;"> |
| <div> |
| <div style="width: 40px; height: 40px; background: #3b82f6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">1</div> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Dampening</div> |
| <div style="font-size: 10px; color: #64748b;">First in sequence</div> |
| </div> |
| <div> |
| <div style="width: 40px; height: 40px; background: #10b981; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">2</div> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Concurrency</div> |
| <div style="font-size: 10px; color: #64748b;">Then control</div> |
| </div> |
| <div> |
| <div style="width: 40px; height: 40px; background: #8b5cf6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">3</div> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Observe</div> |
| <div style="font-size: 10px; color: #64748b;">Then validate</div> |
| </div> |
| <div> |
| <div style="width: 40px; height: 40px; background: #f59e0b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: bold;">4</div> |
| <div style="font-size: 12px; font-weight: 600; color: #1e293b;">Scale</div> |
| <div style="font-size: 10px; color: #64748b;">Only if necessary</div> |
| </div> |
| </div> |
| <div style="margin-top: 15px; padding: 12px; background: white; border-radius: 8px; border-left: 4px solid #3b82f6;"> |
| <div style="font-size: 13px; color: #475569; font-weight: 500;"> |
| <strong>Doctrinal Constraint:</strong> Scaling actions have lower confidence than dampening actions and appear last. |
| If retry amplification is detected, scaling is contraindicated entirely. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| """ |
| |
| return gr.HTML(full_html) |
|
|
| |
| |
| |
| def create_tab2_business_roi(scenarios=INCIDENT_SCENARIOS) -> tuple: |
| dashboard_output = gr.Plot(label="Executive Dashboard", show_label=True) |
| roi_scenario_dropdown = gr.Dropdown( |
| choices=list(scenarios.keys()), |
| value="Cache Miss Storm", |
| label="Scenario for ROI Analysis", |
| info="Select the primary incident type for ROI calculation" |
| ) |
| monthly_slider = gr.Slider( |
| minimum=1, |
| maximum=50, |
| value=15, |
| step=1, |
| label="Monthly Incidents", |
| info="Average number of incidents per month" |
| ) |
| team_slider = gr.Slider( |
| minimum=1, |
| maximum=50, |
| value=5, |
| step=1, |
| label="Team Size", |
| info="Number of engineers on reliability team" |
| ) |
| calculate_btn = gr.Button("📊 Calculate Comprehensive ROI", variant="primary", size="lg") |
| roi_output = gr.JSON(label="ROI Analysis Results", value={}) |
| roi_chart = gr.Plot(label="ROI Visualization") |
| |
| return (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider, |
| calculate_btn, roi_output, roi_chart) |
|
|
| |
| |
| |
| def create_tab3_enterprise_features() -> tuple: |
| |
| try: |
| from app import get_installation_status |
| installation = get_installation_status() |
| |
| license_data = { |
| "status": "✅ OSS Installed" if installation["oss_installed"] else "⚠️ OSS Not Installed", |
| "oss_version": installation["oss_version"] or "Not installed", |
| "enterprise_installed": installation["enterprise_installed"], |
| "enterprise_version": installation["enterprise_version"] or "Not installed", |
| "execution_allowed": installation["execution_allowed"], |
| "recommendations": installation["recommendations"], |
| "badges": installation["badges"] |
| } |
| |
| |
| features_data = [ |
| ["ARF OSS Package", "✅ Installed" if installation["oss_installed"] else "❌ Not Installed", "OSS"], |
| ["Self-Healing Core", "✅ Active", "Enterprise"], |
| ["RAG Graph Memory", "✅ Active", "Both"], |
| ["Predictive Analytics", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"], |
| ["Audit Trail", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"], |
| ["Compliance (SOC2)", "🔒 Enterprise" if not installation["enterprise_installed"] else "✅ Available", "Enterprise"] |
| ] |
| |
| except ImportError: |
| |
| license_data = { |
| "status": "⚠️ Installation Check Failed", |
| "oss_version": "Unknown", |
| "enterprise_installed": False, |
| "recommendations": ["Run installation check"] |
| } |
| features_data = [ |
| ["Self-Healing Core", "✅ Active", "Enterprise"], |
| ["RAG Graph Memory", "✅ Active", "Both"], |
| ["Predictive Analytics", "🔒 Enterprise", "Enterprise"], |
| ["Audit Trail", "🔒 Enterprise", "Enterprise"], |
| ["Compliance (SOC2)", "🔒 Enterprise", "Enterprise"], |
| ["Multi-Cloud", "🔒 Enterprise", "Enterprise"] |
| ] |
| |
| license_display = gr.JSON( |
| value=license_data, |
| label="📦 Package Installation Status" |
| ) |
| |
| validate_btn = gr.Button("🔍 Validate Installation", variant="secondary") |
| trial_btn = gr.Button("🆓 Start 30-Day Trial", variant="secondary") |
| upgrade_btn = gr.Button("🚀 Upgrade to Enterprise", variant="primary") |
| |
| mcp_mode = gr.Dropdown( |
| choices=["advisory", "approval", "autonomous"], |
| value="advisory", |
| label="MCP Safety Mode" |
| ) |
| |
| |
| mcp_mode_info = gr.JSON( |
| value={ |
| "current_mode": "advisory", |
| "description": "OSS Edition - Analysis only, no execution", |
| "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"], |
| "package": "agentic-reliability-framework==3.3.7", |
| "license": "Apache 2.0" |
| }, |
| label="Mode Details" |
| ) |
| |
| integrations_data = [ |
| ["Prometheus", "✅ Connected", "Monitoring"], |
| ["Grafana", "✅ Connected", "Visualization"], |
| ["Slack", "🔒 Enterprise", "Notifications"], |
| ["PagerDuty", "🔒 Enterprise", "Alerting"], |
| ["Jira", "🔒 Enterprise", "Ticketing"], |
| ["Datadog", "🔒 Enterprise", "Monitoring"] |
| ] |
| |
| features_table = gr.Dataframe( |
| headers=["Feature", "Status", "Edition"], |
| value=features_data, |
| label="Feature Comparison" |
| ) |
| integrations_table = gr.Dataframe( |
| headers=["Integration", "Status", "Type"], |
| value=integrations_data, |
| label="Integration Status" |
| ) |
| |
| return (license_display, validate_btn, trial_btn, upgrade_btn, |
| mcp_mode, mcp_mode_info, features_table, integrations_table) |
|
|
| |
| |
| |
| def create_tab4_audit_trail() -> tuple: |
| refresh_btn = gr.Button("🔄 Refresh Audit Trail", variant="secondary") |
| clear_btn = gr.Button("🗑️ Clear History", variant="secondary") |
| export_btn = gr.Button("📥 Export as JSON", variant="primary") |
| |
| execution_headers = ["Time", "Scenario", "Mode", "Status", "Savings", "Details"] |
| incident_headers = ["Time", "Component", "Scenario", "Severity", "Status"] |
| |
| execution_table = gr.Dataframe( |
| headers=execution_headers, |
| value=[], |
| label="Execution History" |
| ) |
| incident_table = gr.Dataframe( |
| headers=incident_headers, |
| value=[], |
| label="Incident History" |
| ) |
| export_text = gr.JSON( |
| value={"status": "Export ready"}, |
| label="Export Data" |
| ) |
| |
| return (refresh_btn, clear_btn, export_btn, execution_table, incident_table, export_text) |
|
|
| |
| |
| |
| def create_tab5_learning_engine() -> tuple: |
| learning_graph = gr.Plot(label="RAG Memory Graph") |
| graph_type = gr.Dropdown( |
| choices=["Incident Patterns", "Action-Outcome Chains", "System Dependencies"], |
| value="Incident Patterns", |
| label="Graph Type" |
| ) |
| show_labels = gr.Checkbox(label="Show Labels", value=True) |
| search_query = gr.Textbox(label="Search Patterns", placeholder="Enter pattern to search...") |
| search_btn = gr.Button("🔍 Search Patterns", variant="secondary") |
| clear_btn_search = gr.Button("🗑️ Clear Search", variant="secondary") |
| search_results = gr.JSON( |
| value={"status": "Ready for search"}, |
| label="Search Results" |
| ) |
| stats_display = gr.JSON( |
| value={"patterns": 42, "incidents": 156, "success_rate": "87.3%"}, |
| label="Learning Statistics" |
| ) |
| patterns_display = gr.JSON( |
| value={"common_patterns": ["cache_storm", "db_pool", "memory_leak"]}, |
| label="Pattern Library" |
| ) |
| performance_display = gr.JSON( |
| value={"accuracy": "94.2%", "recall": "89.7%", "precision": "92.1%"}, |
| label="Agent Performance" |
| ) |
| |
| return (learning_graph, graph_type, show_labels, search_query, search_btn, |
| clear_btn_search, search_results, stats_display, patterns_display, performance_display) |
|
|
| |
| |
| |
| def create_footer() -> gr.HTML: |
| return gr.HTML(""" |
| <div style="text-align: center; padding: 25px; color: #6b7280; font-size: 14px; margin-top: 40px; border-top: 2px solid #e5e7eb; background: #f9fafb; border-radius: 12px;"> |
| <p><strong style="color: #1e293b; font-size: 16px;">Agentic Reliability Framework</strong> © 2026</p> |
| <p>Production-grade multi-agent AI for autonomous system reliability intelligence</p> |
| <div style="margin-top: 15px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;"> |
| <a href="https://github.com/petterjuan/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">GitHub</a> • |
| <a href="https://huggingface.co/spaces/petter2025/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Demo</a> • |
| <a href="https://pypi.org/project/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">PyPI</a> • |
| <a href="mailto:petter2025us@outmail.com" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Enterprise Inquiries</a> |
| </div> |
| </div> |
| """) |
