Spaces:

ARF-AI
/

Agentic-Reliability-Framework-API

Runtime error

App Files Files Community

Agentic-Reliability-Framework-API / ui /components.py

petter2025

Update ui/components.py

1f3a817 verified 6 months ago

Raw

History Blame

118 kB

	"""
	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 to import scenarios from registry first
	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

	# -----------------------------
	# Header & Status - DOCTRINAL LANGUAGE
	# -----------------------------
	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>
	""")

	# -----------------------------
	# CRITICAL RESTORED FUNCTIONS - Missing from current version
	# -----------------------------

	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: 3px solid #f59e0b;
	border-radius: 16px;
	padding: 30px;
	margin: 25px 0;
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	color: #78350f;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
	">
	<div style="display: flex; align-items: center; margin-bottom: 20px; justify-content: center;">
	<div style="
	background: white;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	border: 3px solid #f59e0b;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
	">
	<span style="font-size: 24px; color: #92400e;">⚠️</span>
	</div>
	<div>
	<h3 style="margin: 0; color: #92400e; font-weight: 800; font-size: 22px; letter-spacing: 0.5px;">
	Observation Gate: Awaiting confirmation.
	</h3>
	<p style="margin: 5px 0 0 0; color: #b45309; font-size: 16px; font-weight: 500;">
	System restraint engaged
	</p>
	</div>
	</div>

	<div style="
	background: white;
	border: 2px solid #f59e0b;
	padding: 25px;
	margin: 20px 0;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	">
	<div style="display: flex; align-items: flex-start; gap: 15px;">
	<div style="font-size: 32px; color: #92400e; line-height: 1;">⏸️</div>
	<div>
	<h4 style="margin: 0 0 12px 0; color: #92400e; font-weight: 700; font-size: 20px;">
	Decision Intentionally Deferred
	</h4>
	<p style="margin: 0; color: #78350f; font-size: 16px; line-height: 1.6;">
	The system has detected uncertainty (<strong style="color: #dc2626;">{confidence:.1f}% confidence</strong>)
	and has chosen to observe rather than act.
	Historical evidence indicates premature action increases risk by <strong>47%</strong>, so the system is enforcing an observation-first policy.
	</p>
	</div>
	</div>
	</div>

	<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0;">
	<div style="
	background: #f0f9ff;
	border: 2px solid #0ea5e9;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	">
	<div style="color: #0369a1; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
	Confidence Threshold
	</div>
	<div style="color: #0ea5e9; font-size: 36px; font-weight: 800; line-height: 1;">
	70.0%
	</div>
	<div style="color: #64748b; font-size: 13px; margin-top: 8px;">
	Required for action
	</div>
	</div>

	<div style="
	background: #fef2f2;
	border: 2px solid #ef4444;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	">
	<div style="color: #dc2626; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
	Current Confidence
	</div>
	<div style="color: #ef4444; font-size: 36px; font-weight: 800; line-height: 1;">
	{confidence:.1f}%
	</div>
	<div style="color: #dc2626; font-size: 13px; margin-top: 8px;">
	Below threshold → Observe
	</div>
	</div>
	</div>

	<div style="
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 12px;
	border-left: 4px solid #f59e0b;
	padding: 20px;
	margin-top: 20px;
	">

	<div style="margin-top: 30px; padding-top: 20px; border-top: 2px dashed #f59e0b;">
	<div style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 10px;">
	<div style="width: 12px; height: 12px; background: #ef4444; border-radius: 50%;"></div>
	<div style="flex: 1; height: 4px; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%);"></div>
	<div style="width: 12px; height: 12px; background: #f59e0b; border-radius: 50%;"></div>
	<div style="flex: 1; height: 4px; background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);"></div>
	<div style="width: 12px; height: 12px; background: #10b981; border-radius: 50%;"></div>
	</div>
	<div style="display: flex; justify-content: space-between;">
	<span style="font-size: 12px; color: #dc2626; font-weight: 600;">Observe ({confidence:.1f}%)</span>
	<span style="font-size: 12px; color: #64748b;">Threshold (70%)</span>
	<span style="font-size: 12px; color: #059669; font-weight: 600;">Act (75%+)</span>
	</div>
	</div>
	</div>
	"""
	else:
	html_content = f"""
	<div class="observation-gate" style="
	border: 3px solid #10b981;
	border-radius: 16px;
	padding: 30px;
	margin: 25px 0;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	color: #065f46;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-shadow: 0 8px 32px rgba(16, 185, 129, 0.1);
	">
	<div style="display: flex; align-items: center; margin-bottom: 20px; justify-content: center;">
	<div style="
	background: white;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	border: 3px solid #10b981;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
	">
	<span style="font-size: 24px; color: #059669;">✅</span>
	</div>
	<div>
	<h3 style="margin: 0; color: #065f46; font-weight: 800; font-size: 22px; letter-spacing: 0.5px;">
	OBSERVATION GATE CLEARED
	</h3>
	<p style="margin: 5px 0 0 0; color: #059669; font-size: 16px; font-weight: 500;">
	Confidence threshold met
	</p>
	</div>
	</div>

	<div style="
	background: white;
	border: 2px solid #10b981;
	padding: 25px;
	margin: 20px 0;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	">
	<div style="display: flex; align-items: flex-start; gap: 15px;">
	<div style="font-size: 32px; color: #065f46; line-height: 1;">⚡</div>
	<div>
	<h4 style="margin: 0 0 12px 0; color: #065f46; font-weight: 700; font-size: 20px;">
	Proceed with Policy Action
	</h4>
	<p style="margin: 0; color: #047857; font-size: 16px; line-height: 1.6;">
	Confidence exceeds threshold. System may proceed with sequenced actions.
	Historical evidence will be consulted before any execution.
	</p>
	</div>
	</div>
	</div>

	<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0;">
	<div style="
	background: #f0f9ff;
	border: 2px solid #0ea5e9;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	">
	<div style="color: #0369a1; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
	Confidence Threshold
	</div>
	<div style="color: #0ea5e9; font-size: 36px; font-weight: 800; line-height: 1;">
	70.0%
	</div>
	<div style="color: #64748b; font-size: 13px; margin-top: 8px;">
	Required for action
	</div>
	</div>

	<div style="
	background: #f0fdf4;
	border: 2px solid #10b981;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	">
	<div style="color: #059669; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
	Current Confidence
	</div>
	<div style="color: #10b981; font-size: 36px; font-weight: 800; line-height: 1;">
	{confidence:.1f}%
	</div>
	<div style="color: #059669; font-size: 13px; margin-top: 8px;">
	Above threshold → Proceed
	</div>
	</div>
	</div>

	<div style="
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 12px;
	border-left: 4px solid #10b981;
	padding: 20px;
	margin-top: 20px;
	">
	<div style="color: #64748b; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px;">
	✅ Safety Principle
	</div>
	<p style="margin: 0; color: #475569; font-size: 15px; line-height: 1.5; font-style: italic;">
	"When confidence is high, proceed with sequenced actions. Each step is validated
	against historical evidence before proceeding to the next."
	</p>
	</div>

	<div style="margin-top: 30px; padding-top: 20px; border-top: 2px dashed #10b981;">
	<div style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 10px;">
	<div style="width: 12px; height: 12px; background: #10b981; border-radius: 50%;"></div>
	<div style="flex: 1; height: 4px; background: linear-gradient(90deg, #10b981 0%, #22c55e 100%);"></div>
	<div style="width: 12px; height: 12px; background: #22c55e; border-radius: 50%;"></div>
	<div style="flex: 1; height: 4px; background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);"></div>
	<div style="width: 12px; height: 12px; background: #4ade80; border-radius: 50%;"></div>
	</div>
	<div style="display: flex; justify-content: space-between;">
	<span style="font-size: 12px; color: #065f46; font-weight: 600;">Ready ({confidence:.1f}%)</span>
	<span style="font-size: 12px; color: #059669;">Threshold (70%)</span>
	<span style="font-size: 12px; color: #16a34a; font-weight: 600;">Proceed</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: Evidence > Prediction
	</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: Awaiting confirmation
	</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()

	# Timeline data
	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]

	# Add traces
	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>'
	))

	# Add vertical lines for key events
	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")

	# Update layout
	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
	)

	# Add annotation for savings
	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

	# -----------------------------
	# NEW: Observation Gate Renderer - CRITICAL PSYCHOLOGICAL FIX
	# -----------------------------
	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)

	# Parse timestamp for countdown
	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>
	""")

	# -----------------------------
	# NEW: Historical Evidence Panel - RECALL DOMINANCE
	# -----------------------------
	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.
	"""
	# Extract from scenario or use defaults
	historical_panel = scenario_data.get("historical_evidence_panel", {})

	scaling_failures = historical_panel.get("scaling_first_failures", [])
	dampening_successes = historical_panel.get("dampening_first_successes", [])

	# Build failures HTML
	failures_html = ""
	for i, failure in enumerate(scaling_failures[:3]): # Show top 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>
	"""

	# Build successes HTML
	successes_html = ""
	for i, success in enumerate(dampening_successes[:3]): # Show top 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;">
	Historical evidence outweighs model confidence.
	</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;">Scaling-First Failures (Evidence Present)</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;">Dampening-First Successes (Evidence Present)</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;">
	If history shows failure, the system will not repeat it.
	</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>
	""")

	# -----------------------------
	# Performance Metrics Function - DOCTRINAL METRICS
	# -----------------------------
	# 1. First, update the update_performance_metrics function to return what app.py expects:
	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!
	"""

	# Scenario-specific metrics mapping WITH GRADIENT COLORS
	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
	}
	}

	# Determine scenario type
	scenario_type = "Default"
	for key in ["Cache", "Database", "Kubernetes", "Network", "Storage"]:
	if key.lower() in scenario_name.lower():
	scenario_type = key
	break

	# Get metrics for scenario type
	metrics = metrics_config.get(scenario_type, metrics_config["Default"])

	# Create HTML for each metric card WITH GRADIENT BORDERS
	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

	# 2. Update create_tab1_incident_demo to use the SAME variable names:

	def create_tab1_incident_demo():
	"""
	Creates Live Demo Tab components with psychological advantage baked in.
	Returns EXACTLY 26 values matching app.py expectations.

	Canonical Question: "What should we do right now?" (Policy advice only)
	No business metrics allowed in this tab.
	"""
	import gradio as gr

	# 1. Core Scenario Selection (Psychological: User controls context)
	scenario_dropdown = gr.Dropdown(
	choices=["Retry Storm Amplification", "Cascading Dependency Failure",
	"Partial Regional Outage", "Latent Configuration Drift"],
	value="Retry Storm Amplification",
	label="Select Incident Scenario",
	info="Choose the operational context for policy evaluation"
	)

	# 2. Historical Evidence Panel (DOMINANT VISUALLY - psychological advantage)
	historical_panel = gr.DataFrame(
	value=[
	["2024-03-15", "US-East", "Retry Storm", "Dampen → Observe → Scale", "Contained in 42s"],
	["2024-02-28", "EU-West", "Cascading Failure", "Dampen → Isolate → Repair", "Contained in 3m 18s"],
	["2024-01-12", "AP-South", "Config Drift", "Observe → Diagnose → Fix", "Prevented outage"]
	],
	headers=["Date", "Environment", "Pattern", "Sequence Applied", "Outcome"],
	label="📊 Historical Evidence Dominates Models",
	interactive=False,
	height=200
	)

	# 3. Scenario Context Card
	scenario_card = gr.Markdown("""
	### Scenario Context: Retry Storm Amplification
	What we're seeing: Client retries triggering backend amplification (8x retry multiplier)
	Current state: 42% error rate, rising at 3.2%/minute
	Risk profile: Service degradation → Partial outage in 8-12 minutes
	""")

	# 4. Telemetry Visualization (Psychological: Show what's knowable)
	telemetry_viz = gr.Plot(
	value=create_telemetry_plot(),
	label="Real-time Telemetry: Error Rate & Load"
	)

	# 5. Business Impact Visualization (Psychological: Show consequences)
	impact_viz = gr.Plot(
	value=create_impact_plot(),
	label="Predicted Impact Trajectory"
	)

	# 6. OBSERVATION GATE (CRITICAL PSYCHOLOGICAL ELEMENT)
	observation_gate_placeholder = create_observation_gate_placeholder()

	# 7. SEQUENCING VISUALIZATION (Policy, not reaction)
	sequencing_panel = create_sequencing_visualization()

	# 8. Workflow Header
	workflow_header = gr.Markdown("### Policy Execution Sequence")

	# 9-11. PROCESS DISPLAYS (Doctrinal: "Process" not "Agent")
	detection_process = create_detection_display("DETECTION_PROCESS")
	recall_process = create_recall_display("RECALL_PROCESS")
	decision_process = create_decision_display("DECISION_PROCESS")

	# 12-14. OSS/Enterprise Boundary
	oss_section = gr.Markdown("#### 🔓 Open Source Capabilities")
	enterprise_section = gr.Markdown("#### 🔒 Enterprise Governance")
	oss_btn = gr.Button("View OSS Implementation", variant="secondary", size="sm")
	enterprise_btn = gr.Button("Requires Enterprise License", variant="secondary", size="sm")

	# 15-17. Approval & MCP
	approval_toggle = gr.Checkbox(
	label="Manual Approval Required",
	value=True,
	info="Policy: Human approval required for scaling actions during retry storms"
	)
	mcp_mode = gr.Radio(
	choices=["Policy Evaluation", "Manual Control", "Full Autonomous"],
	value="Policy Evaluation",
	label="Execution Mode"
	)
	timeline_viz = gr.Plot(value=create_timeline_plot())

	# 18-21. PERFORMANCE METRICS (CRITICAL: Must match app.py indices 18-21)
	detection_time = gr.Number(
	value=2.8,
	label="Detection Time (seconds)",
	precision=1
	)

	# INDEX 19: MUST BE recall_quality (not mttr)
	recall_quality = gr.Number(
	value=0.92,
	label="Recall Quality Score",
	precision=2,
	info="Historical match confidence"
	)

	# INDEX 20: MUST BE confidence_score (not auto_heal)
	confidence_score = gr.Number(
	value=0.65,
	label="System Confidence",
	precision=2,
	info="Policy execution confidence < 70% triggers observation gate"
	)

	# INDEX 21: MUST BE sequencing_stage (not savings)
	sequencing_stage = gr.Textbox(
	value="Dampening",
	label="Current Sequencing Stage",
	info="Policy: Dampen → Observe → Concurrent Fix → Scale"
	)

	# 22-24. Results Displays
	oss_results_display = gr.Markdown("### OSS Results Will Appear Here")
	enterprise_results_display = gr.Markdown("### Enterprise Results Will Appear Here")
	approval_display = gr.Markdown("Status: Awaiting manual approval per policy")

	# 25. DEMO BUTTON (CRITICAL: Index 25 must be demo_btn)
	demo_btn = gr.Button(
	"▶️ Run Complete Walkthrough",
	variant="primary",
	size="lg",
	elem_id="demo_primary_btn"
	)

	# RETURN EXACTLY 26 VALUES IN CORRECT ORDER
	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, # ← CORRECT VARIABLES
	oss_results_display, enterprise_results_display, approval_display, demo_btn
	)
	# -----------------------------
	# Tab 1: Live Incident Demo - UPDATED WITH RESTORED FUNCTIONS
	# -----------------------------
	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"
	"""

	# Get the default scenario data
	default_scenario_data = scenarios.get(default_scenario, {})
	business_impact = default_scenario_data.get("business_impact", {})
	metrics = default_scenario_data.get("metrics", {})

	with gr.Row():
	# Left Column: Scenario Selection & Live Visualization
	with gr.Column(scale=1, variant="panel") as left_col:
	# Scenario Selection with rich preview
	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 EVIDENCE PANEL FIRST (RECALL DOMINANCE) ============
	historical_panel = create_historical_evidence_panel(default_scenario_data)

	# Scenario Card with doctrinally compliant language
	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>
	""")

	# Visualization section
	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"
	)

	# Middle Column: Process Workflow (NOT Agent Workflow)
	with gr.Column(scale=2, variant="panel") as middle_col:
	# ============ OBSERVATION GATE PLACEHOLDER ============
	observation_gate_placeholder = create_observation_gate_placeholder()

	# ============ SEQUENCING VISUALIZATION ============
	sequencing_header = gr.Markdown("### 🔄 Sequencing Logic: Dampening → Concurrency → Observe → Scale")
	sequencing_panel = create_sequencing_visualization()

	# Process Workflow Header (NOT Agent Workflow)
	workflow_header = gr.Markdown("## 🔄 Policy Process Workflow")
	workflow_subheader = gr.Markdown("### How the system transforms variance into policy execution")

	# Process Status Cards (NOT Agent Status Cards)
	with gr.Row():
	detection_process = create_detection_display()
	recall_process = create_recall_display()
	decision_process = create_decision_display()

	# Mode Selection & Safety Controls
	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
	)

	# OSS vs Enterprise Boundary Visualization
	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>
	""")

	# Execution Controls
	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 visualization
	timeline_header = gr.Markdown("### ⏰ Incident Timeline")
	timeline_viz = gr.Plot(
	create_timeline_comparison_plot(),
	label="",
	show_label=False,
	elem_id="timeline_plot"
	)

	# Right Column: Results & Metrics
	with gr.Column(scale=1, variant="panel") as right_col:
	# Real-time Metrics Dashboard
	metrics_header = gr.Markdown("## 📊 Performance Metrics")

	# Metric Cards Grid - MUST MATCH app.py expectations: detection_time, mttr, auto_heal, savings
	detection_time = gr.HTML()
	mttr = gr.HTML() # Mean Time to Resolve
	auto_heal = gr.HTML() # Auto-heal rate
	savings = gr.HTML() # Cost savings

	# Results Display Areas
	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 Status
	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 Actions
	demo_btn = gr.Button(
	"▶️ Run Complete Walkthrough",
	variant="secondary",
	size="lg"
	)
	demo_info = gr.Markdown("Experience the full workflow from detection to resolution")

	# CRITICAL: Return EXACTLY 26 values that app.py expects
	return (
	# Left column returns (5 values)
	scenario_dropdown, historical_panel, scenario_card, telemetry_viz, impact_viz,
	# Middle column returns (13 values)
	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,
	# Right column returns (8 values - MUST BE: detection_time, mttr, auto_heal, savings, oss_results_display, enterprise_results_display, approval_display, demo_btn)
	detection_time, mttr, auto_heal, savings,
	oss_results_display, enterprise_results_display, approval_display, demo_btn
	# DO NOT include: oss_info, enterprise_info, demo_info - app.py doesn't expect them
	)

	# -----------------------------
	# NEW: Create Realism Panel (Updated for doctrinal compliance)
	# -----------------------------
	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", [])

	# Build ranked actions HTML with formal HealingIntent fields
	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"

	# Formal HealingIntent fields
	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>
	"""

	# Combine all panels
	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)

	# -----------------------------
	# Tab 2: Business ROI - Updated
	# -----------------------------
	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)

	# -----------------------------
	# Tab 3: Enterprise Features - UPDATED WITH INSTALLATION STATUS
	# -----------------------------
	def create_tab3_enterprise_features() -> tuple:
	# Get installation status
	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"]
	}

	# Update features table based on installation
	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:
	# Fallback if installation check fails
	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"
	)

	# Initial mode info
	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)

	# -----------------------------
	# Tab 4: Audit Trail
	# -----------------------------
	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)

	# -----------------------------
	# Tab 5: Learning Engine
	# -----------------------------
	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)

	# -----------------------------
	# Footer
	# -----------------------------
	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>
	""")