Hugging Face's logo

Spaces:
A-R-F
/
Agentic-Reliability-Framework-API
Running

App Files Community
2
petter2025 commited on
Commit
3621c2a
·
verified ·
1 Parent(s): 0dc832b

Update ui/components.py

Browse files
Files changed (1) hide show
  1. ui/components.py +153 -160
ui/components.py CHANGED
@@ -13,7 +13,7 @@ from demo.scenarios import INCIDENT_SCENARIOS
13
  def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
14
  mock_text = " · MOCK MODE" if mock_mode else ""
15
  return gr.HTML(f"""
16
- <div class="header-section">
17
  <h1 style="margin: 0 0 10px 0; font-size: 32px;">🚀 Agentic Reliability Framework</h1>
18
  <h2 style="margin: 0; font-size: 24px; opacity: 0.9;">v{version} (OSS Edition){mock_text}</h2>
19
  <p style="margin: 15px 0 0 0; font-size: 16px; opacity: 0.8;">
@@ -24,17 +24,17 @@ def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
24
 
25
  def create_status_bar() -> gr.HTML:
26
  return gr.HTML("""
27
- <div class="status-bar">
28
- <span class="status-item active">✅ System Online</span>
29
- <span class="status-item active">🧠 Agentic Core Active</span>
30
- <span class="status-item active">📦 OSS Mode (Advisory Only)</span>
31
- <span class="status-item active">🔒 MCP Safety Enabled</span>
32
- <span class="status-item">💰 <a href="#tab2" style="color: #10b981; text-decoration: underline;">Enterprise ROI: 5.2×</a></span>
33
  </div>
34
  """)
35
 
36
  # -----------------------------
37
- # Tab 1: Live Incident Demo - UPDATED TO USE SCENARIOS DATA
38
  # -----------------------------
39
  def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
40
  """
@@ -59,35 +59,35 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
59
  container=False
60
  )
61
 
62
- # Scenario Card with rich information - UPDATED TO USE SCENARIOS DATA
63
  scenario_card = gr.HTML(f"""
64
- <div class="scenario-card">
65
- <div class="scenario-header">
66
- <h3>🚨 {default_scenario}</h3>
67
- <span class="severity-badge {default_scenario_data.get('severity', 'HIGH').lower()}">{default_scenario_data.get('severity', 'HIGH')}</span>
68
  </div>
69
- <div class="scenario-details">
70
- <div class="scenario-detail-row">
71
- <span class="detail-label">Component:</span>
72
- <span class="detail-value">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
73
  </div>
74
- <div class="scenario-detail-row">
75
- <span class="detail-label">Affected Users:</span>
76
- <span class="detail-value">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
77
  </div>
78
- <div class="scenario-detail-row">
79
- <span class="detail-label">Revenue Risk:</span>
80
- <span class="detail-value revenue-risk">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
81
  </div>
82
- <div class="scenario-detail-row">
83
- <span class="detail-label">Detection Time:</span>
84
- <span class="detail-value">45 seconds (ARF AI)</span>
85
  </div>
86
- <div class="scenario-tags">
87
- <span class="scenario-tag">{default_scenario_data.get('component', 'unknown').split('_')[0]}</span>
88
- <span class="scenario-tag">{default_scenario_data.get('severity', 'high').lower()}</span>
89
- <span class="scenario-tag">production</span>
90
- <span class="scenario-tag">incident</span>
91
  </div>
92
  </div>
93
  </div>
@@ -107,49 +107,49 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
107
  workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
108
  workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
109
 
110
- # Agent Status Cards
111
  with gr.Row():
112
  detection_agent = gr.HTML("""
113
- <div class="agent-card detection">
114
- <div class="agent-icon">🕵️‍♂️</div>
115
- <div class="agent-content">
116
- <h4>Detection Agent</h4>
117
- <p class="agent-status-text">Anomaly detected: <strong>99.8% confidence</strong></p>
118
- <div class="agent-metrics">
119
- <span class="agent-metric">Response: 45s</span>
120
- <span class="agent-metric">Accuracy: 98.7%</span>
121
  </div>
122
- <div class="agent-status active">ACTIVE</div>
123
  </div>
124
  </div>
125
  """)
126
 
127
  recall_agent = gr.HTML("""
128
- <div class="agent-card recall">
129
- <div class="agent-icon">🧠</div>
130
- <div class="agent-content">
131
- <h4>Recall Agent</h4>
132
- <p class="agent-status-text"><strong>3 similar incidents</strong> found in RAG memory</p>
133
- <div class="agent-metrics">
134
- <span class="agent-metric">Recall: 92%</span>
135
- <span class="agent-metric">Context: 5 patterns</span>
136
  </div>
137
- <div class="agent-status active">ACTIVE</div>
138
  </div>
139
  </div>
140
  """)
141
 
142
  decision_agent = gr.HTML("""
143
- <div class="agent-card decision">
144
- <div class="agent-icon">🎯</div>
145
- <div class="agent-content">
146
- <h4>Decision Agent</h4>
147
- <p class="agent-status-text">Generating healing intent with <strong>94% confidence</strong></p>
148
- <div class="agent-metrics">
149
- <span class="agent-metric">Success Rate: 87%</span>
150
- <span class="agent-metric">Safety: 100%</span>
151
  </div>
152
- <div class="agent-status active">ACTIVE</div>
153
  </div>
154
  </div>
155
  """)
@@ -159,64 +159,60 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
159
 
160
  with gr.Row():
161
  oss_section = gr.HTML("""
162
- <div class="oss-section">
163
- <div class="edition-header">
164
- <div class="edition-icon">🆓</div>
165
- <h3>OSS Edition</h3>
166
- <span class="edition-badge">Apache 2.0</span>
167
  </div>
168
- <div class="edition-description">
169
- <p><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
170
  </div>
171
- <div class="boundary-content">
172
- <div class="intent-card">
173
- <div class="intent-header">
174
- <h4>📝 Healing Intent Created</h4>
175
- <span class="intent-confidence">94% confidence</span>
176
- </div>
177
- <div class="intent-details">
178
- <p><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
179
- <p><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
180
- <p><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
181
- <p><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
182
- </div>
183
- <div class="boundary-stop">
184
- <div class="stop-line"></div>
185
- <div class="stop-text">🚫 OSS STOPS HERE - No execution</div>
186
- <div class="stop-line"></div>
187
- </div>
188
  </div>
189
  </div>
190
  </div>
191
  """)
192
 
193
  enterprise_section = gr.HTML("""
194
- <div class="enterprise-section">
195
- <div class="edition-header">
196
- <div class="edition-icon">💰</div>
197
- <h3>Enterprise Edition</h3>
198
- <span class="edition-badge">Commercial</span>
199
  </div>
200
- <div class="edition-description">
201
- <p><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
202
  </div>
203
- <div class="boundary-content">
204
- <div class="execution-card">
205
- <div class="execution-header">
206
- <h4>⚡ Ready to Execute</h4>
207
- <span class="execution-mode autonomous">AUTONOMOUS</span>
208
- </div>
209
- <div class="execution-details">
210
- <p><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
211
- <p><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
212
- <p><strong>Cost Saved:</strong> <span class="savings-highlight">$6,375</span></p>
213
- <p><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
214
- </div>
215
- <div class="boundary-start">
216
- <div class="start-line"></div>
217
- <div class="start-text">✅ Enterprise executes with MCP safety</div>
218
- <div class="start-line"></div>
219
- </div>
220
  </div>
221
  </div>
222
  </div>
@@ -228,19 +224,17 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
228
  oss_btn = gr.Button(
229
  "🆓 Run OSS Analysis",
230
  variant="secondary",
231
- size="lg",
232
- elem_classes="oss-btn"
233
  )
234
- oss_info = gr.Markdown("*Free, open-source analysis*", elem_classes="button-info")
235
 
236
  with gr.Column(scale=1):
237
  enterprise_btn = gr.Button(
238
  "💰 Execute Enterprise Healing",
239
  variant="primary",
240
- size="lg",
241
- elem_classes="enterprise-btn"
242
  )
243
- enterprise_info = gr.Markdown("*Requires Enterprise license*", elem_classes="button-info")
244
 
245
  # Mode Selection & Safety Controls
246
  with gr.Row():
@@ -270,49 +264,49 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
270
  # Real-time Metrics Dashboard
271
  metrics_header = gr.Markdown("## 📊 Performance Metrics")
272
 
273
- # Metric Cards Grid
274
  with gr.Row():
275
  detection_time = gr.HTML("""
276
- <div class="metric-card detection">
277
- <div class="metric-icon">⏱️</div>
278
- <div class="metric-content">
279
- <h4>Detection Time</h4>
280
- <p class="metric-value">45s</p>
281
- <p class="metric-comparison">↓ 89% faster than average</p>
282
  </div>
283
  </div>
284
  """)
285
 
286
  mttr = gr.HTML("""
287
- <div class="metric-card mttr">
288
- <div class="metric-icon">⚡</div>
289
- <div class="metric-content">
290
- <h4>Mean Time to Resolve</h4>
291
- <p class="metric-value">12m</p>
292
- <p class="metric-comparison">↓ 73% faster than manual</p>
293
  </div>
294
  </div>
295
  """)
296
 
297
  with gr.Row():
298
  auto_heal = gr.HTML("""
299
- <div class="metric-card auto-heal">
300
- <div class="metric-icon">🤖</div>
301
- <div class="metric-content">
302
- <h4>Auto-Heal Rate</h4>
303
- <p class="metric-value">81.7%</p>
304
- <p class="metric-comparison">↑ 5.4× industry average</p>
305
  </div>
306
  </div>
307
  """)
308
 
309
  savings = gr.HTML(f"""
310
- <div class="metric-card savings">
311
- <div class="metric-icon">💰</div>
312
- <div class="metric-content">
313
- <h4>Cost Saved</h4>
314
- <p class="metric-value">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
315
- <p class="metric-comparison">Per incident avoided</p>
316
  </div>
317
  </div>
318
  """)
@@ -342,33 +336,32 @@ def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Ca
342
  height=200
343
  )
344
 
345
- # Approval Status
346
  approval_display = gr.HTML("""
347
- <div class="approval-status">
348
- <div class="approval-header">
349
- <h4>👤 Human Approval Status</h4>
350
- <span class="approval-badge not-required">Not Required</span>
351
  </div>
352
- <div class="approval-content">
353
- <p><strong>Current Mode:</strong> Advisory (OSS Only)</p>
354
- <p><em>Switch to "Approval" mode to enable human-in-the-loop workflows</em></p>
355
- <div class="approval-workflow">
356
- <div class="workflow-step">1. ARF generates intent</div>
357
- <div class="workflow-step">2. Human reviews & approves</div>
358
- <div class="workflow-step">3. ARF executes safely</div>
359
  </div>
360
  </div>
361
  </div>
362
  """)
363
 
364
- # Demo Actions - FIXED: removed 'full_width' parameter
365
  demo_btn = gr.Button(
366
  "▶️ Run Complete Demo Walkthrough",
367
  variant="secondary",
368
  size="lg"
369
  )
370
- demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*",
371
- elem_classes="demo-info")
372
 
373
  return (
374
  # Left column returns
@@ -541,14 +534,14 @@ def create_tab5_learning_engine() -> tuple:
541
  # -----------------------------
542
  def create_footer() -> gr.HTML:
543
  return gr.HTML("""
544
- <div class="footer">
545
- <p><strong>Agentic Reliability Framework</strong> © 2025</p>
546
  <p>Production-grade multi-agent AI for autonomous system reliability intelligence</p>
547
- <div class="footer-links">
548
- <a href="https://github.com/petterjuan/agentic-reliability-framework" target="_blank">GitHub</a> •
549
- <a href="https://huggingface.co/spaces/petter2025/agentic-reliability-framework" target="_blank">Demo</a> •
550
- <a href="https://pypi.org/project/agentic-reliability-framework" target="_blank">PyPI</a> •
551
- <a href="mailto:sales@arf.dev">Enterprise Inquiries</a>
552
  </div>
553
  </div>
554
  """)
 
13
  def create_header(version="3.3.6", mock_mode=False) -> gr.HTML:
14
  mock_text = " · MOCK MODE" if mock_mode else ""
15
  return gr.HTML(f"""
16
+ <div style="text-align: center; margin-bottom: 25px; padding: 30px 40px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);">
17
  <h1 style="margin: 0 0 10px 0; font-size: 32px;">🚀 Agentic Reliability Framework</h1>
18
  <h2 style="margin: 0; font-size: 24px; opacity: 0.9;">v{version} (OSS Edition){mock_text}</h2>
19
  <p style="margin: 15px 0 0 0; font-size: 16px; opacity: 0.8;">
 
24
 
25
  def create_status_bar() -> gr.HTML:
26
  return gr.HTML("""
27
+ <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; padding: 15px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; flex-wrap: wrap;">
28
+ <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">✅ System Online</span>
29
+ <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">🧠 Agentic Core Active</span>
30
+ <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">📦 OSS Mode (Advisory Only)</span>
31
+ <span style="padding: 8px 16px; background: #10b981; color: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #10b981;">🔒 MCP Safety Enabled</span>
32
+ <span style="padding: 8px 16px; background: white; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0;">💰 <a href="#tab2" style="color: #10b981; text-decoration: underline;">Enterprise ROI: 5.2×</a></span>
33
  </div>
34
  """)
35
 
36
  # -----------------------------
37
+ # Tab 1: Live Incident Demo - UPDATED TO USE INLINE STYLES
38
  # -----------------------------
39
  def create_tab1_incident_demo(scenarios=INCIDENT_SCENARIOS, default_scenario="Cache Miss Storm") -> tuple:
40
  """
 
59
  container=False
60
  )
61
 
62
+ # Scenario Card with rich information - USING INLINE STYLES
63
  scenario_card = gr.HTML(f"""
64
+ <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;">
65
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
66
+ <h3 style="margin: 0; font-size: 18px; color: #1e293b;">🚨 {default_scenario}</h3>
67
+ <span style="padding: 4px 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">{default_scenario_data.get('severity', 'HIGH')}</span>
68
  </div>
69
+ <div style="margin-top: 15px;">
70
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
71
+ <span style="font-size: 13px; color: #64748b; font-weight: 500;">Component:</span>
72
+ <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{default_scenario_data.get('component', 'Unknown').replace('_', ' ').title()}</span>
73
  </div>
74
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
75
+ <span style="font-size: 13px; color: #64748b; font-weight: 500;">Affected Users:</span>
76
+ <span style="font-size: 14px; color: #1e293b; font-weight: 600;">{metrics.get('affected_users', 'Unknown') if 'affected_users' in metrics else 'Unknown'}</span>
77
  </div>
78
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
79
+ <span style="font-size: 13px; color: #64748b; font-weight: 500;">Revenue Risk:</span>
80
+ <span style="font-size: 14px; color: #ef4444; font-weight: 700;">${business_impact.get('revenue_loss_per_hour', 0):,}/hour</span>
81
  </div>
82
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 4px 0;">
83
+ <span style="font-size: 13px; color: #64748b; font-weight: 500;">Detection Time:</span>
84
+ <span style="font-size: 14px; color: #1e293b; font-weight: 600;">45 seconds (ARF AI)</span>
85
  </div>
86
+ <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
87
+ <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>
88
+ <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">{default_scenario_data.get('severity', 'high').lower()}</span>
89
+ <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">production</span>
90
+ <span style="padding: 3px 8px; background: #f1f5f9; border-radius: 6px; font-size: 11px; color: #475569; font-weight: 500;">incident</span>
91
  </div>
92
  </div>
93
  </div>
 
107
  workflow_header = gr.Markdown("## 🔄 ARF Agent Workflow")
108
  workflow_subheader = gr.Markdown("### How ARF transforms incidents into autonomous healing")
109
 
110
+ # Agent Status Cards - USING INLINE STYLES
111
  with gr.Row():
112
  detection_agent = gr.HTML("""
113
+ <div style="border: 2px solid #3b82f6; border-radius: 14px; padding: 18px; background: #eff6ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
114
+ <div style="font-size: 32px; margin-bottom: 10px;">🕵️‍♂️</div>
115
+ <div style="width: 100%;">
116
+ <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Detection Agent</h4>
117
+ <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Anomaly detected: <strong>99.8% confidence</strong></p>
118
+ <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
119
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Response: 45s</span>
120
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Accuracy: 98.7%</span>
121
  </div>
122
+ <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div>
123
  </div>
124
  </div>
125
  """)
126
 
127
  recall_agent = gr.HTML("""
128
+ <div style="border: 2px solid #8b5cf6; border-radius: 14px; padding: 18px; background: #f5f3ff; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
129
+ <div style="font-size: 32px; margin-bottom: 10px;">🧠</div>
130
+ <div style="width: 100%;">
131
+ <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Recall Agent</h4>
132
+ <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;"><strong>3 similar incidents</strong> found in RAG memory</p>
133
+ <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
134
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Recall: 92%</span>
135
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Context: 5 patterns</span>
136
  </div>
137
+ <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div>
138
  </div>
139
  </div>
140
  """)
141
 
142
  decision_agent = gr.HTML("""
143
+ <div style="border: 2px solid #10b981; border-radius: 14px; padding: 18px; background: #f0fdf4; text-align: center; flex: 1; margin: 5px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
144
+ <div style="font-size: 32px; margin-bottom: 10px;">🎯</div>
145
+ <div style="width: 100%;">
146
+ <h4 style="margin: 0 0 8px 0; font-size: 16px; color: #1e293b;">Decision Agent</h4>
147
+ <p style="font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.4;">Generating healing intent with <strong>94% confidence</strong></p>
148
+ <div style="display: flex; justify-content: space-around; margin-bottom: 12px;">
149
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Success Rate: 87%</span>
150
+ <span style="font-size: 11px; padding: 3px 8px; background: rgba(255, 255, 255, 0.8); border-radius: 6px; color: #475569; font-weight: 500;">Safety: 100%</span>
151
  </div>
152
+ <div style="display: inline-block; padding: 5px 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 20px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px;">ACTIVE</div>
153
  </div>
154
  </div>
155
  """)
 
159
 
160
  with gr.Row():
161
  oss_section = gr.HTML("""
162
+ <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0f9ff; border: 2px solid #0ea5e9;">
163
+ <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
164
+ <div style="font-size: 28px;">🆓</div>
165
+ <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">OSS Edition</h3>
166
+ <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Apache 2.0</span>
167
  </div>
168
+ <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
169
+ <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Analysis & Advisory Only</strong> - No execution, permanently safe</p>
170
  </div>
171
+ <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
172
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
173
+ <h4 style="margin: 0; font-size: 16px; color: #1e293b;">📝 Healing Intent Created</h4>
174
+ <span style="padding: 4px 10px; background: #dbeafe; color: #1d4ed8; border-radius: 6px; font-size: 12px; font-weight: bold;">94% confidence</span>
175
+ </div>
176
+ <div>
177
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Action:</strong> Scale Redis cluster from 3 to 5 nodes</p>
178
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Pattern Match:</strong> Similar incident resolved with scaling (87% success rate)</p>
179
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Safety Check:</strong> ✅ Passed (blast radius: 2 services)</p>
180
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Estimated Impact:</strong> Reduce MTTR from 45min to 12min</p>
181
+ </div>
182
+ <div style="margin-top: 20px; text-align: center;">
183
+ <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
184
+ <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #fee2e2; color: #dc2626; border-radius: 8px; display: inline-block;">🚫 OSS STOPS HERE - No execution</div>
185
+ <div style="height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); margin: 8px 0;"></div>
 
 
186
  </div>
187
  </div>
188
  </div>
189
  """)
190
 
191
  enterprise_section = gr.HTML("""
192
+ <div style="padding: 20px; border-radius: 14px; margin-bottom: 15px; flex: 1; min-height: 320px; background: #f0fdf4; border: 2px solid #10b981;">
193
+ <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(0, 0, 0, 0.1);">
194
+ <div style="font-size: 28px;">💰</div>
195
+ <h3 style="margin: 0; font-size: 20px; color: #1e293b; flex: 1;">Enterprise Edition</h3>
196
+ <span style="padding: 4px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 11px; font-weight: bold; color: #475569;">Commercial</span>
197
  </div>
198
+ <div style="margin-bottom: 20px; padding: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 10px;">
199
+ <p style="margin: 0; font-size: 14px; color: #475569; font-weight: 500;"><strong>Full Execution & Learning</strong> - Autonomous healing with safety guarantees</p>
200
  </div>
201
+ <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
202
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9;">
203
+ <h4 style="margin: 0; font-size: 16px; color: #1e293b;">⚡ Ready to Execute</h4>
204
+ <span style="padding: 4px 10px; background: #10b981; color: white; border-radius: 6px; font-size: 12px; font-weight: bold; text-transform: uppercase;">AUTONOMOUS</span>
205
+ </div>
206
+ <div>
207
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Mode:</strong> Autonomous (Requires Enterprise license)</p>
208
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Expected Recovery:</strong> 12 minutes (vs 45 min manual)</p>
209
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Cost Saved:</strong> <span style="color: #10b981; font-weight: 700;">$6,375</span></p>
210
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Users Protected:</strong> 45,000 → 0 impacted</p>
211
+ </div>
212
+ <div style="margin-top: 20px; text-align: center;">
213
+ <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
214
+ <div style="font-size: 12px; font-weight: bold; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 8px; display: inline-block;">✅ Enterprise executes with MCP safety</div>
215
+ <div style="height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); margin: 8px 0;"></div>
 
 
216
  </div>
217
  </div>
218
  </div>
 
224
  oss_btn = gr.Button(
225
  "🆓 Run OSS Analysis",
226
  variant="secondary",
227
+ size="lg"
 
228
  )
229
+ oss_info = gr.Markdown("*Free, open-source analysis*")
230
 
231
  with gr.Column(scale=1):
232
  enterprise_btn = gr.Button(
233
  "💰 Execute Enterprise Healing",
234
  variant="primary",
235
+ size="lg"
 
236
  )
237
+ enterprise_info = gr.Markdown("*Requires Enterprise license*")
238
 
239
  # Mode Selection & Safety Controls
240
  with gr.Row():
 
264
  # Real-time Metrics Dashboard
265
  metrics_header = gr.Markdown("## 📊 Performance Metrics")
266
 
267
+ # Metric Cards Grid - USING INLINE STYLES
268
  with gr.Row():
269
  detection_time = gr.HTML("""
270
+ <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #3b82f6;">
271
+ <div style="font-size: 28px; margin-bottom: 10px;">⏱️</div>
272
+ <div>
273
+ <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Detection Time</h4>
274
+ <p style="font-size: 28px; font-weight: bold; color: #1e40af; margin: 8px 0;">45s</p>
275
+ <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 89% faster than average</p>
276
  </div>
277
  </div>
278
  """)
279
 
280
  mttr = gr.HTML("""
281
+ <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #10b981;">
282
+ <div style="font-size: 28px; margin-bottom: 10px;">⚡</div>
283
+ <div>
284
+ <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Mean Time to Resolve</h4>
285
+ <p style="font-size: 28px; font-weight: bold; color: #10b981; margin: 8px 0;">12m</p>
286
+ <p style="font-size: 12px; color: #64748b; margin: 0;">↓ 73% faster than manual</p>
287
  </div>
288
  </div>
289
  """)
290
 
291
  with gr.Row():
292
  auto_heal = gr.HTML("""
293
+ <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #8b5cf6;">
294
+ <div style="font-size: 28px; margin-bottom: 10px;">🤖</div>
295
+ <div>
296
+ <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Auto-Heal Rate</h4>
297
+ <p style="font-size: 28px; font-weight: bold; color: #8b5cf6; margin: 8px 0;">81.7%</p>
298
+ <p style="font-size: 12px; color: #64748b; margin: 0;">↑ 5.4× industry average</p>
299
  </div>
300
  </div>
301
  """)
302
 
303
  savings = gr.HTML(f"""
304
+ <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; background: white; margin: 8px; text-align: center; flex: 1; min-width: 140px; border-left: 4px solid #f59e0b;">
305
+ <div style="font-size: 28px; margin-bottom: 10px;">💰</div>
306
+ <div>
307
+ <h4 style="margin: 0 0 8px 0; font-size: 14px; color: #64748b; font-weight: 600;">Cost Saved</h4>
308
+ <p style="font-size: 28px; font-weight: bold; color: #f59e0b; margin: 8px 0;">${int(business_impact.get('revenue_loss_per_hour', 8500) * 0.85 / 1000):.1f}K</p>
309
+ <p style="font-size: 12px; color: #64748b; margin: 0;">Per incident avoided</p>
310
  </div>
311
  </div>
312
  """)
 
336
  height=200
337
  )
338
 
339
+ # Approval Status - USING INLINE STYLES
340
  approval_display = gr.HTML("""
341
+ <div style="border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px; background: white; margin-top: 20px;">
342
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;">
343
+ <h4 style="margin: 0; font-size: 16px; color: #1e293b;">👤 Human Approval Status</h4>
344
+ <span style="padding: 4px 12px; background: #10b981; color: white; border-radius: 8px; font-size: 12px; font-weight: bold; text-transform: uppercase;">Not Required</span>
345
  </div>
346
+ <div style="margin-top: 15px;">
347
+ <p style="margin: 8px 0; font-size: 14px; color: #475569;"><strong>Current Mode:</strong> Advisory (OSS Only)</p>
348
+ <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>
349
+ <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
350
+ <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">1. ARF generates intent</div>
351
+ <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">2. Human reviews & approves</div>
352
+ <div style="padding: 12px; background: #f8fafc; border-radius: 10px; border-left: 4px solid #3b82f6; font-size: 14px; color: #475569; font-weight: 500;">3. ARF executes safely</div>
353
  </div>
354
  </div>
355
  </div>
356
  """)
357
 
358
+ # Demo Actions
359
  demo_btn = gr.Button(
360
  "▶️ Run Complete Demo Walkthrough",
361
  variant="secondary",
362
  size="lg"
363
  )
364
+ demo_info = gr.Markdown("*Experience the full ARF workflow from detection to resolution*")
 
365
 
366
  return (
367
  # Left column returns
 
534
  # -----------------------------
535
  def create_footer() -> gr.HTML:
536
  return gr.HTML("""
537
+ <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;">
538
+ <p><strong style="color: #1e293b; font-size: 16px;">Agentic Reliability Framework</strong> © 2025</p>
539
  <p>Production-grade multi-agent AI for autonomous system reliability intelligence</p>
540
+ <div style="margin-top: 15px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
541
+ <a href="https://github.com/petterjuan/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">GitHub</a> •
542
+ <a href="https://huggingface.co/spaces/petter2025/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Demo</a> •
543
+ <a href="https://pypi.org/project/agentic-reliability-framework" target="_blank" style="color: #3b82f6; text-decoration: none; font-weight: 500;">PyPI</a> •
544
+ <a href="mailto:sales@arf.dev" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Enterprise Inquiries</a>
545
  </div>
546
  </div>
547
  """)