| """ |
| Gradio-only UI components for ARF |
| Ensures full compatibility with app.py |
| Updated with proper imports and error handling |
| """ |
|
|
| import gradio as gr |
| from typing import Dict, List, Any |
| import logging |
|
|
| 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.6", mock_mode=False) -> gr.HTML: |
| mock_text = " · MOCK MODE" if mock_mode else "" |
| return gr.HTML(f""" |
| <div style="text-align: center; margin-bottom: 25px; padding: 30px 40px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);"> |
| <h1 style="margin: 0 0 10px 0; font-size: 32px;">🚀 Agentic Reliability Framework</h1> |
| <h2 style="margin: 0; font-size: 24px; opacity: 0.9;">v{version} (OSS Edition){mock_text}</h2> |
| <p style="margin: 15px 0 0 0; font-size: 16px; opacity: 0.8;"> |
| Production-grade multi-agent AI for autonomous system reliability intelligence |
| </p> |
| </div> |
| """) |
|
|
| def create_status_bar() -> gr.HTML: |
| return gr.HTML(""" |
| <div style="display: flex; justify-content: center; gap: 20px; 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;">✅ System Online</span> |
| <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;">🧠 Agentic Core Active</span> |
| <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;">📦 OSS Mode (Advisory Only)</span> |
| <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;">🔒 MCP Safety Enabled</span> |
| <span style="padding: 8px 16px; background: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0;">💰 <a href="#tab2" style="color: #10b981; text-decoration: underline;">Enterprise ROI: 5.2×</a></span> |
| </div> |
| """) |
|
|
| |
| |
| |
| def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple: |
| """ |
| Create an expressive, comprehensive incident demo tab for ARF. |
| Shows the complete OSS analysis → Enterprise execution workflow. |
| """ |
| |
| |
| default_scenario_data = scenarios.get(default_scenario, {}) |
| business_impact = default_scenario_data.get("business_impact", {}) |
| metrics = default_scenario_data.get("metrics", {}) |
| |
| |
| with gr.Column(scale=1, variant="panel") as left_col: |
| |
| scenario_dropdown = gr.Dropdown( |
| choices=list(scenarios.keys()), |
| value=default_scenario, |
| label="🎯 Select Incident Scenario", |
| info="Choose a production incident to analyze", |
| interactive=True, |
| container=False |
| ) |
| |
| |
| 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, #ef4444 0%, #dc2626 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')}</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;">Affected Users:</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: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_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 (ARF AI)</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;">{default_scenario_data.get('severity', 'high').lower()}</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;">incident</span> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| telemetry_header = gr.Markdown("### 📈 Live Telemetry") |
| telemetry_viz = gr.Plot(label="", show_label=False) |
| |
| |
| impact_header = gr.Markdown("### 💰 Business Impact") |
| impact_viz = gr.Plot(label="", show_label=False) |
| |
| |
| with gr.Column(scale=2, variant="panel") as middle_col: |
| |
| workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow") |
| workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing") |
| |
| |
| with gr.Row(): |
| detection_agent = gr.HTML(""" |
| <div style="border: 2px solid #3b82f6; border-radius: 14px; padding: 18px; background: #eff6ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;"> |
| <div style="font-size: 32px; margin-bottom: 10px;">🕵️♂️</div> |
| <div style="width: 100%;"> |
| <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Detection Agent</h4> |
| <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Anomaly detected: <strong>99.8% confidence</strong></p> |
| <div style="display: flex; justify-content: space-around; margin-bottom: 12px;"> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Response: 45s</span> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Accuracy: 98.7%</span> |
| </div> |
| <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div> |
| </div> |
| </div> |
| """) |
| |
| recall_agent = gr.HTML(""" |
| <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 18px; background: #f5f3ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;"> |
| <div style="font-size: 32px; margin-bottom: 10px;">🧠</div> |
| <div style="width: 100%;"> |
| <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Recall Agent</h4> |
| <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;"><strong>3 similar incidents</strong> found in RAG memory</p> |
| <div style="display: flex; justify-content: space-around; margin-bottom: 12px;"> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Recall: 92%</span> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Context: 5 patterns</span> |
| </div> |
| <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div> |
| </div> |
| </div> |
| """) |
| |
| decision_agent = gr.HTML(""" |
| <div style="border: 2px solid #10b981; border-radius: 14px; padding: 18px; background: #f0fdf4; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;"> |
| <div style="font-size: 32px; margin-bottom: 10px;">🎯</div> |
| <div style="width: 100%;"> |
| <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Decision Agent</h4> |
| <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Generating healing intent with <strong>94% confidence</strong></p> |
| <div style="display: flex; justify-content: space-around; margin-bottom: 12px;"> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Success Rate: 87%</span> |
| <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Safety: 100%</span> |
| </div> |
| <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div> |
| </div> |
| </div> |
| """) |
| |
| |
| boundary_header = gr.Markdown("### 🎭 OSS vs Enterprise: The Safety Boundary") |
| |
| with gr.Row(): |
| oss_section = gr.HTML(""" |
| <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);"> |
| <div style="font-size: 28px;">🆓</div> |
| <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3> |
| <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Apache 2.0</span> |
| </div> |
| <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;"> |
| <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p> |
| </div> |
| <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 Healing Intent Created</h4> |
| <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span> |
| </div> |
| <div> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p> |
| <p style="margin: 8px 0; font-size= 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p> |
| </div> |
| <div style="margin-top: 20px; text-align: center;"> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div> |
| <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #fee2e2; color: #dc2626; border-radius: 8px; display: inline-block;">🚫 OSS STOPS HERE - No execution</div> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| enterprise_section = gr.HTML(""" |
| <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0fdf4; border: 2px solid #10b981;"> |
| <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);"> |
| <div style="font-size: 28px;">💰</div> |
| <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Enterprise Edition</h3> |
| <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Commercial</span> |
| </div> |
| <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;"> |
| <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p> |
| </div> |
| <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;"> |
| <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4> |
| <span style="padding: 4px 10px; background: #10b981; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span> |
| </div> |
| <div> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p> |
| <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Users Protected:</strong> 45,000 → 0 impacted</p> |
| </div> |
| <div style="margin-top: 20px; text-align: center;"> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 8px; display: inline-block;">✅ Enterprise executes with MCP safety</div> |
| <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| with gr.Row(): |
| with gr.Column(scale=1): |
| oss_btn = gr.Button( |
| "🆓 Run OSS Analysis", |
| variant="secondary", |
| size="lg" |
| ) |
| oss_info = gr.Markdown("*Free, open-source analysis*") |
| |
| with gr.Column(scale=1): |
| enterprise_btn = gr.Button( |
| "💰 Execute Enterprise Healing", |
| variant="primary", |
| size="lg" |
| ) |
| enterprise_info = gr.Markdown("*Requires Enterprise license*") |
| |
| |
| 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="MCP Safety Mode", |
| info="Control execution safety level", |
| interactive=True |
| ) |
| |
| |
| timeline_header = gr.Markdown("### ⏰ Incident Timeline") |
| timeline_viz = gr.Plot(label="", show_label=False) |
| |
| |
| with gr.Column(scale=1, variant="panel") as right_col: |
| |
| metrics_header = gr.Markdown("## 📊 Performance Metrics") |
| |
| |
| with gr.Row(): |
| detection_time = gr.HTML(""" |
| <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 #3b82f6;"> |
| <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; color: #1e40af; margin: 8px 0;">45s</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p> |
| </div> |
| </div> |
| """) |
| |
| mttr = gr.HTML(""" |
| <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 #10b981;"> |
| <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;">Mean Time to Resolve</h4> |
| <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p> |
| </div> |
| </div> |
| """) |
| |
| with gr.Row(): |
| auto_heal = gr.HTML(""" |
| <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 #8b5cf6;"> |
| <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;">Auto-Heal Rate</h4> |
| <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p> |
| </div> |
| </div> |
| """) |
| |
| savings = gr.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 #f59e0b;"> |
| <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;">Cost Saved</h4> |
| <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p> |
| <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p> |
| </div> |
| </div> |
| """) |
| |
| |
| oss_results_header = gr.Markdown("### 🆓 OSS Analysis Results") |
| oss_results_display = gr.JSON( |
| label="", |
| value={ |
| "status": "Analysis Pending", |
| "agents": ["Detection", "Recall", "Decision"], |
| "mode": "Advisory Only", |
| "action": "Generate HealingIntent" |
| }, |
| height=200 |
| ) |
| |
| enterprise_results_header = gr.Markdown("### 💰 Enterprise 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 (OSS 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. ARF generates intent</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</div> |
| <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div> |
| </div> |
| </div> |
| </div> |
| """) |
| |
| |
| demo_btn = gr.Button( |
| "▶️ Run Complete Demo Walkthrough", |
| variant="secondary", |
| size="lg" |
| ) |
| demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*") |
| |
| return ( |
| |
| scenario_dropdown, scenario_card, telemetry_viz, impact_viz, |
| |
| workflow_header, detection_agent, recall_agent, decision_agent, |
| 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_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: |
| license_display = gr.JSON( |
| value={"status": "🆓 OSS Mode Active", "features": ["Advisory Analysis", "RAG Memory", "HealingIntent"]}, |
| label="License Status" |
| ) |
| validate_btn = gr.Button("🔍 Validate License", 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"] |
| }, |
| label="Mode Details" |
| ) |
| |
| 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"] |
| ] |
| |
| 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> © 2025</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:sales@arf.dev" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Enterprise Inquiries</a> |
| </div> |
| </div> |
| """) |
