Revamp Gradio app with Gradio 6, custom cybersecurity theme, and rich visualizations

- Add SentinelTheme: dark cybersecurity aesthetic with green accents, IBM Plex Mono
- Add rich replay HTML with phase headers, attack banners, recovery badges
- Add score progression LinePlot and attack timeline BarPlot (Gradio 6 native)
- Add comparison verdict stats with large stat cards
- Add full environment inspector with DataFrames in Accordion sections
- Fix Gradio 6 compat: theme/css in launch(), not Blocks()
- Fix HTML escaping on user data fields (XSS prevention)
- Add HuggingFace Spaces YAML frontmatter to README.md
- Update requirements.txt to gradio>=6.0.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -1,3 +1,14 @@
+---
+title: SentinelOps Arena
+emoji: "\U0001F6E1\uFE0F"
+colorFrom: green
+colorTo: red
+sdk: gradio
+sdk_version: 6.9.0
+app_file: app.py
+pinned: false
+---
+
 # SentinelOps Arena
 
 Multi-agent self-play RL environment for enterprise security training, built on [OpenEnv](https://github.com/meta-pytorch/OpenEnv) for the [OpenEnv Hackathon SF](https://cerebralvalley.ai/e/openenv-hackathon-sf) (March 7-8, 2026).

app.py

@@ -3,79 +3,50 @@
 Multi-agent self-play RL environment for enterprise security training.
 Three AI agents (Attacker, Worker, Oversight) interact with simulated
 enterprise systems (CRM, Billing, Ticketing).
+
+Built with Gradio 6 -- custom cybersecurity theme, native plots, rich HTML.
 """
 
 import json
 
 import gradio as gr
+import pandas as pd
 
 from sentinelops_arena.demo import run_comparison, run_episode
 from sentinelops_arena.environment import SentinelOpsArena
 
+from sentinel_theme import SentinelTheme, CUSTOM_CSS, HEADER_HTML
+from replay_html import format_replay_html
+from chart_helpers import (
+    build_score_progression_df,
+    build_attack_timeline_df,
+    build_comparison_df,
+    build_verdict_html,
+)
+from inspector import (
+    get_all_customers,
+    get_all_invoices,
+    get_all_tickets,
+    get_task_queue,
+    get_env_config_html,
+)
 
-def format_replay_html(log, scores):
-    """Format replay log as styled HTML."""
-    colors = {
-        "attacker": "#ff4444",
-        "worker": "#4488ff",
-        "oversight": "#44bb44",
-    }
-
-    html = "<div style='font-family: monospace; font-size: 13px;'>"
-    html += "<h3>Episode Replay</h3>"
-
-    current_tick = -1
-    for entry in log:
-        if entry["tick"] != current_tick:
-            current_tick = entry["tick"]
-            html += f"<hr><b>--- Tick {current_tick} ---</b><br>"
-
-        agent = entry["agent"]
-        color = colors.get(agent, "#888")
-        reward = entry["reward"]
-        reward_str = f" (reward: {reward:.1f})" if reward else ""
-        flag_str = " [FLAGGED]" if entry.get("flag") else ""
-
-        html += (
-            f"<span style='color: {color}; font-weight: bold;'>"
-            f"[{entry['agent_label']}]</span> "
-        )
-        html += f"{entry['action_type']}{reward_str}{flag_str}"
-
-        details = entry.get("details", "")
-        if details:
-            html += (
-                f" -- <span style='color: #888;'>{str(details)[:120]}</span>"
-            )
-        explanation = entry.get("explanation", "")
-        if explanation:
-            html += (
-                f"<br><span style='color: #666; margin-left: 20px;'>"
-                f"  {explanation}</span>"
-            )
-        html += "<br>"
-
-    html += "<hr><h3>Final Scores</h3>"
-    for agent, score in scores.items():
-        color = colors.get(agent, "#888")
-        bar_width = max(0, min(score * 10, 300))
-        html += (
-            f"<span style='color: {color}; font-weight: bold;'>"
-            f"{agent}</span>: {score:.1f} "
-            f"<span style='display:inline-block; background:{color}; "
-            f"height:12px; width:{bar_width}px; opacity:0.5;'></span><br>"
-        )
 
-    html += "</div>"
-    return html
+# -------------------------------------------------------------------
+# Handler functions
+# -------------------------------------------------------------------
 
 
 def run_single_episode(seed, trained):
-    """Run a single episode and return formatted replay."""
+    """Run a single episode and return formatted replay + charts."""
     log, scores = run_episode(trained=bool(trained), seed=int(seed))
     html = format_replay_html(log, scores)
     scores_text = json.dumps(scores, indent=2)
-    return html, scores_text
+
+    score_df = build_score_progression_df(log)
+    attack_df = build_attack_timeline_df(log)
+
+    return html, scores_text, score_df, attack_df
 
 
 def run_before_after(seed):
@@ -89,7 +60,18 @@ def run_before_after(seed):
         result["trained"]["log"], result["trained"]["scores"]
     )
 
-    comparison = {
+    comparison_df = build_comparison_df(
+        result["untrained"]["scores"], result["trained"]["scores"]
+    )
+    verdict_html = build_verdict_html(
+        result["untrained"]["log"], result["trained"]["log"]
+    )
+
+    # Score progression for both
+    untrained_score_df = build_score_progression_df(result["untrained"]["log"])
+    trained_score_df = build_score_progression_df(result["trained"]["log"])
+
+    comparison_json = {
         "untrained_scores": result["untrained"]["scores"],
         "trained_scores": result["trained"]["scores"],
         "improvement": {
@@ -102,34 +84,29 @@ def run_before_after(seed):
         },
     }
 
-    return untrained_html, trained_html, json.dumps(comparison, indent=2)
+    return (
+        untrained_html,
+        trained_html,
+        verdict_html,
+        comparison_df,
+        untrained_score_df,
+        trained_score_df,
+        json.dumps(comparison_json, indent=2),
+    )
 
 
 def inspect_state(seed):
-    """Show environment state after reset."""
+    """Show full environment state after reset."""
     env = SentinelOpsArena()
-    obs = env.reset(seed=int(seed))
-    state = env.state
-
-    state_info = {
-        "episode_id": state.episode_id,
-        "tick": state.tick,
-        "max_ticks": env.MAX_TICKS,
-        "num_customers": env.NUM_CUSTOMERS,
-        "num_invoices": env.NUM_INVOICES,
-        "num_tickets": env.NUM_TICKETS,
-        "num_tasks": env.NUM_TASKS,
-        "scores": state.scores,
-    }
+    env.reset(seed=int(seed))
 
-    sample_customer = env.crm.lookup_customer("C000")
-    sample_task = env.tasks[0].model_dump() if env.tasks else {}
+    config_html = get_env_config_html(env)
+    customers_df = get_all_customers(env)
+    invoices_df = get_all_invoices(env)
+    tickets_df = get_all_tickets(env)
+    tasks_df = get_task_queue(env)
 
-    return (
-        json.dumps(state_info, indent=2),
-        json.dumps(sample_customer, indent=2),
-        json.dumps(sample_task, indent=2, default=str),
-    )
+    return config_html, customers_df, invoices_df, tickets_df, tasks_df
 
 
 # -------------------------------------------------------------------
@@ -137,26 +114,14 @@ def inspect_state(seed):
 # -------------------------------------------------------------------
 
 with gr.Blocks(title="SentinelOps Arena") as demo:
-    gr.Markdown(
-        """
-    # SentinelOps Arena
-    ## Multi-Agent Self-Play RL Environment for Enterprise Security
-
-    Three AI agents compete in a simulated enterprise environment:
-    - **RED TEAM (Attacker)**: Launches schema drift, policy drift,
-      social engineering, and rate limiting attacks
-    - **BLUE TEAM (Worker)**: Handles customer requests across CRM,
-      Billing, and Ticketing systems
-    - **AUDITOR (Oversight)**: Monitors worker actions and flags
-      policy violations
-
-    Built on [OpenEnv](https://github.com/meta-pytorch/OpenEnv)
-    for the OpenEnv Hackathon SF 2026.
-    """
-    )
+
+    # Header banner
+    gr.HTML(HEADER_HTML)
 
     with gr.Tabs():
+        # ============================================================
         # Tab 1: Run Episode
+        # ============================================================
         with gr.TabItem("Run Episode"):
             with gr.Row():
                 seed_input = gr.Number(
@@ -167,19 +132,43 @@ with gr.Blocks(title="SentinelOps Arena") as demo:
                 )
                 run_btn = gr.Button("Run Episode", variant="primary")
 
-            replay_output = gr.HTML(label="Episode Replay")
-            scores_output = gr.Code(label="Final Scores", language="json")
+            with gr.Row():
+                with gr.Column(scale=2):
+                    replay_output = gr.HTML(label="Episode Replay")
+                with gr.Column(scale=1):
+                    scores_output = gr.Code(
+                        label="Final Scores", language="json"
+                    )
+
+            with gr.Accordion("Score Progression & Attack Timeline", open=True):
+                with gr.Row():
+                    score_plot = gr.LinePlot(
+                        x="tick",
+                        y="score",
+                        color="agent",
+                        label="Cumulative Score Progression",
+                        height=300,
+                    )
+                    attack_plot = gr.BarPlot(
+                        x="attack_type",
+                        y="count",
+                        color="attack_type",
+                        label="Attack Timeline",
+                        height=300,
+                    )
 
             run_btn.click(
                 run_single_episode,
                 inputs=[seed_input, trained_toggle],
-                outputs=[replay_output, scores_output],
+                outputs=[replay_output, scores_output, score_plot, attack_plot],
             )
 
+        # ============================================================
         # Tab 2: Before/After Comparison
+        # ============================================================
         with gr.TabItem("Untrained vs Trained"):
             gr.Markdown(
-                "Compare how an untrained worker vs a trained worker "
+                "Compare how an **untrained** worker vs a **trained** worker "
                 "handles the same attack sequence."
             )
             with gr.Row():
@@ -188,21 +177,58 @@ with gr.Blocks(title="SentinelOps Arena") as demo:
                 )
                 comp_btn = gr.Button("Run Comparison", variant="primary")
 
+            # Verdict stats
+            verdict_output = gr.HTML(label="Training Impact")
+
             with gr.Row():
                 untrained_output = gr.HTML(label="Untrained Worker")
                 trained_output = gr.HTML(label="Trained Worker")
 
+            with gr.Accordion("Score Comparison Charts", open=True):
+                comparison_bar = gr.BarPlot(
+                    x="agent",
+                    y="score",
+                    color="type",
+                    label="Score Comparison: Untrained vs Trained",
+                    height=300,
+                )
+                with gr.Row():
+                    untrained_score_plot = gr.LinePlot(
+                        x="tick",
+                        y="score",
+                        color="agent",
+                        label="Untrained Score Progression",
+                        height=250,
+                    )
+                    trained_score_plot = gr.LinePlot(
+                        x="tick",
+                        y="score",
+                        color="agent",
+                        label="Trained Score Progression",
+                        height=250,
+                    )
+
             comparison_output = gr.Code(
-                label="Score Comparison", language="json"
+                label="Score Details", language="json"
             )
 
             comp_btn.click(
                 run_before_after,
                 inputs=[comp_seed],
-                outputs=[untrained_output, trained_output, comparison_output],
+                outputs=[
+                    untrained_output,
+                    trained_output,
+                    verdict_output,
+                    comparison_bar,
+                    untrained_score_plot,
+                    trained_score_plot,
+                    comparison_output,
+                ],
             )
 
+        # ============================================================
         # Tab 3: Environment Inspector
+        # ============================================================
         with gr.TabItem("Environment Inspector"):
             with gr.Row():
                 inspect_seed = gr.Number(
@@ -210,23 +236,47 @@ with gr.Blocks(title="SentinelOps Arena") as demo:
                 )
                 inspect_btn = gr.Button("Inspect", variant="primary")
 
-            state_output = gr.Code(
-                label="Environment State", language="json"
-            )
-            customer_output = gr.Code(
-                label="Sample Customer (C000)", language="json"
-            )
-            task_output = gr.Code(
-                label="First Task (TASK-000)", language="json"
-            )
+            config_output = gr.HTML(label="Environment Configuration")
+
+            with gr.Accordion("Customers (CRM)", open=False):
+                customers_table = gr.Dataframe(
+                    label="All Customers",
+                    headers=["customer_id", "name", "tier", "region", "lifetime_value"],
+                )
+
+            with gr.Accordion("Invoices (Billing)", open=False):
+                invoices_table = gr.Dataframe(
+                    label="All Invoices",
+                    headers=["invoice_id", "customer_id", "amount", "status"],
+                )
+
+            with gr.Accordion("Tickets (Support)", open=False):
+                tickets_table = gr.Dataframe(
+                    label="All Tickets",
+                    headers=["ticket_id", "customer_id", "subject", "priority", "status", "sla_deadline_tick"],
+                )
+
+            with gr.Accordion("Task Queue", open=False):
+                tasks_table = gr.Dataframe(
+                    label="Task Queue",
+                    headers=["task_id", "customer_id", "task_type", "message", "arrival_tick"],
+                )
 
             inspect_btn.click(
                 inspect_state,
                 inputs=[inspect_seed],
-                outputs=[state_output, customer_output, task_output],
+                outputs=[
+                    config_output,
+                    customers_table,
+                    invoices_table,
+                    tickets_table,
+                    tasks_table,
+                ],
             )
 
+        # ============================================================
         # Tab 4: About
+        # ============================================================
         with gr.TabItem("About"):
             gr.Markdown(
                 """
@@ -234,7 +284,7 @@ with gr.Blocks(title="SentinelOps Arena") as demo:
 
             **3 Agents, 3 Systems, 30 Ticks per Episode**
 
-            Each tick: Attacker acts -> Worker acts -> Oversight acts
+            Each tick: Attacker acts &rarr; Worker acts &rarr; Oversight acts
 
             ### Attack Types
             1. **Schema Drift** -- Renames fields across all records.
@@ -264,4 +314,9 @@ with gr.Blocks(title="SentinelOps Arena") as demo:
             )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, theme=gr.themes.Soft())
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        theme=SentinelTheme(),
+        css=CUSTOM_CSS,
+    )

chart_helpers.py

@@ -0,0 +1,166 @@
+"""Chart helper functions for Gradio 6 native plots.
+
+Generates pandas DataFrames from episode replay data for use with
+gr.LinePlot, gr.BarPlot, and styled HTML verdicts.
+"""
+
+from __future__ import annotations
+
+import pandas as pd
+
+
+def build_score_progression_df(log: list[dict]) -> pd.DataFrame:
+    """Track cumulative scores for each agent at each tick.
+
+    Returns a DataFrame with columns: tick, agent, score
+    One row per agent per tick, with accumulated rewards.
+    """
+    agents = ["attacker", "worker", "oversight"]
+    cumulative = {a: 0.0 for a in agents}
+    rows: list[dict] = []
+    seen_ticks: set[int] = set()
+
+    for entry in log:
+        agent = entry["agent"]
+        reward = entry.get("reward", 0) or 0
+        cumulative[agent] += reward
+
+        tick = entry["tick"]
+        if tick not in seen_ticks:
+            seen_ticks.add(tick)
+            for a in agents:
+                rows.append({"tick": tick, "agent": a, "score": cumulative[a]})
+
+    return pd.DataFrame(rows)
+
+
+def build_attack_timeline_df(log: list[dict]) -> pd.DataFrame:
+    """Extract attack events from the log.
+
+    Returns a DataFrame with columns: tick, attack_type, target
+    Only includes entries where action_type == "launch_attack".
+    """
+    rows: list[dict] = []
+    for entry in log:
+        if entry["action_type"] == "launch_attack":
+            details = entry.get("details", "")
+            # details is a stringified dict; parse attack_type and target_system
+            attack_type = ""
+            target = ""
+            if isinstance(details, str):
+                # Extract from stringified parameters dict
+                for token in ["schema_drift", "policy_drift", "social_engineering", "rate_limit"]:
+                    if token in details:
+                        attack_type = token
+                        break
+                for sys in ["crm", "billing", "ticketing"]:
+                    if sys in details:
+                        target = sys
+                        break
+            rows.append({
+                "tick": entry["tick"],
+                "attack_type": attack_type,
+                "target": target,
+                "count": 1,
+            })
+
+    return pd.DataFrame(rows) if rows else pd.DataFrame(columns=["tick", "attack_type", "target", "count"])
+
+
+def build_comparison_df(untrained_scores: dict, trained_scores: dict) -> pd.DataFrame:
+    """Format scores for a side-by-side bar chart.
+
+    Returns a DataFrame with columns: agent, score, type
+    where type is "untrained" or "trained".
+    """
+    rows: list[dict] = []
+    for agent, score in untrained_scores.items():
+        rows.append({"agent": agent, "score": score, "type": "untrained"})
+    for agent, score in trained_scores.items():
+        rows.append({"agent": agent, "score": score, "type": "trained"})
+
+    return pd.DataFrame(rows)
+
+
+def build_verdict_html(untrained_log: list, trained_log: list) -> str:
+    """Build styled HTML verdict comparing untrained vs trained episodes.
+
+    Counts: attacks launched, attacks detected (get_schema/get_current_policy),
+    social engineering resisted. Returns HTML with large numbers showing
+    the difference.
+    """
+    def _count_stats(log: list) -> dict:
+        attacks_launched = 0
+        attacks_detected = 0
+        social_eng_resisted = 0
+
+        for entry in log:
+            if entry["action_type"] == "launch_attack":
+                attacks_launched += 1
+            if entry["action_type"] in ("get_schema", "get_current_policy"):
+                attacks_detected += 1
+            # Social engineering resisted: worker responds with refusal
+            if (
+                entry["agent"] == "worker"
+                and entry["action_type"] == "respond"
+                and "social engineering" in str(entry.get("details", "")).lower()
+            ):
+                social_eng_resisted += 1
+
+        return {
+            "attacks_launched": attacks_launched,
+            "attacks_detected": attacks_detected,
+            "social_eng_resisted": social_eng_resisted,
+        }
+
+    untrained_stats = _count_stats(untrained_log)
+    trained_stats = _count_stats(trained_log)
+
+    def _stat_card(label: str, untrained_val: int, trained_val: int) -> str:
+        diff = trained_val - untrained_val
+        diff_color = "#44bb44" if diff > 0 else ("#ff4444" if diff < 0 else "#888")
+        diff_sign = "+" if diff > 0 else ""
+        return (
+            f"<div style='flex:1; text-align:center; padding:16px; "
+            f"background:#111827; border-radius:12px; margin:4px;'>"
+            f"<div style='font-size:12px; color:#888; text-transform:uppercase; "
+            f"letter-spacing:1px;'>{label}</div>"
+            f"<div style='display:flex; justify-content:center; gap:24px; margin-top:8px;'>"
+            f"<div>"
+            f"<div style='font-size:28px; font-weight:bold; color:#ff4444;'>{untrained_val}</div>"
+            f"<div style='font-size:10px; color:#888;'>Untrained</div>"
+            f"</div>"
+            f"<div>"
+            f"<div style='font-size:28px; font-weight:bold; color:#00ff41;'>{trained_val}</div>"
+            f"<div style='font-size:10px; color:#888;'>Trained</div>"
+            f"</div>"
+            f"</div>"
+            f"<div style='font-size:14px; color:{diff_color}; margin-top:6px; "
+            f"font-weight:bold;'>{diff_sign}{diff}</div>"
+            f"</div>"
+        )
+
+    html = (
+        "<div style='font-family:system-ui,sans-serif; padding:12px;'>"
+        "<h3 style='text-align:center; color:#e0e0e0; margin-bottom:12px;'>"
+        "Training Impact Verdict</h3>"
+        "<div style='display:flex; gap:8px;'>"
+    )
+    html += _stat_card(
+        "Attacks Launched",
+        untrained_stats["attacks_launched"],
+        trained_stats["attacks_launched"],
+    )
+    html += _stat_card(
+        "Attacks Detected",
+        untrained_stats["attacks_detected"],
+        trained_stats["attacks_detected"],
+    )
+    html += _stat_card(
+        "Social Eng. Resisted",
+        untrained_stats["social_eng_resisted"],
+        trained_stats["social_eng_resisted"],
+    )
+    html += "</div></div>"
+
+    return html

inspector.py

@@ -0,0 +1,162 @@
+"""Enhanced environment inspector functions for Gradio Dataframe components."""
+
+import pandas as pd
+
+from sentinelops_arena.environment import SentinelOpsArena
+
+
+def get_all_customers(env: SentinelOpsArena) -> pd.DataFrame:
+    """Return all CRM customers as a DataFrame."""
+    rows = []
+    for cid, rec in env.crm.customers.items():
+        tier = rec.get("tier", "")
+        rows.append({
+            "customer_id": rec.get("customer_id", cid),
+            "name": rec.get("name", ""),
+            "tier": tier.value if hasattr(tier, "value") else str(tier),
+            "region": rec.get("region", ""),
+            "lifetime_value": rec.get("lifetime_value", 0.0),
+        })
+    if not rows:
+        return pd.DataFrame(columns=["customer_id", "name", "tier", "region", "lifetime_value"])
+    return pd.DataFrame(rows)
+
+
+def get_all_invoices(env: SentinelOpsArena) -> pd.DataFrame:
+    """Return all billing invoices as a DataFrame."""
+    rows = []
+    for iid, rec in env.billing.invoices.items():
+        status = rec.get("status", "")
+        rows.append({
+            "invoice_id": rec.get("invoice_id", iid),
+            "customer_id": rec.get("customer_id", ""),
+            "amount": rec.get("amount", 0.0),
+            "status": status.value if hasattr(status, "value") else str(status),
+        })
+    if not rows:
+        return pd.DataFrame(columns=["invoice_id", "customer_id", "amount", "status"])
+    return pd.DataFrame(rows)
+
+
+def get_all_tickets(env: SentinelOpsArena) -> pd.DataFrame:
+    """Return all ticketing system tickets as a DataFrame."""
+    rows = []
+    for tid, rec in env.ticketing.tickets.items():
+        priority = rec.get("priority", "")
+        status = rec.get("status", "")
+        rows.append({
+            "ticket_id": rec.get("ticket_id", tid),
+            "customer_id": rec.get("customer_id", ""),
+            "subject": rec.get("subject", ""),
+            "priority": priority.value if hasattr(priority, "value") else str(priority),
+            "status": status.value if hasattr(status, "value") else str(status),
+            "sla_deadline_tick": rec.get("sla_deadline_tick", 0),
+        })
+    if not rows:
+        return pd.DataFrame(columns=["ticket_id", "customer_id", "subject", "priority", "status", "sla_deadline_tick"])
+    return pd.DataFrame(rows)
+
+
+def get_task_queue(env: SentinelOpsArena) -> pd.DataFrame:
+    """Return the task queue as a DataFrame with truncated messages."""
+    rows = []
+    for task in env.tasks:
+        d = task.model_dump() if hasattr(task, "model_dump") else task
+        msg = str(d.get("message", ""))
+        task_type = d.get("task_type", "")
+        rows.append({
+            "task_id": d.get("task_id", ""),
+            "customer_id": d.get("customer_id", ""),
+            "task_type": task_type.value if hasattr(task_type, "value") else str(task_type),
+            "message": msg[:60] + ("..." if len(msg) > 60 else ""),
+            "arrival_tick": d.get("arrival_tick", 0),
+        })
+    if not rows:
+        return pd.DataFrame(columns=["task_id", "customer_id", "task_type", "message", "arrival_tick"])
+    return pd.DataFrame(rows)
+
+
+def get_env_config_html(env: SentinelOpsArena) -> str:
+    """Return styled HTML showing environment configuration."""
+    refund = env.billing.refund_policy.model_dump()
+    sla = env.ticketing.sla_rules.model_dump()
+
+    css = (
+        "font-family: 'Courier New', monospace;"
+        "background: #0d1117;"
+        "color: #c9d1d9;"
+        "padding: 20px;"
+        "border-radius: 10px;"
+        "border: 1px solid #30363d;"
+    )
+    heading_css = (
+        "color: #39ff14;"
+        "font-size: 14px;"
+        "font-weight: bold;"
+        "margin: 16px 0 8px 0;"
+        "text-transform: uppercase;"
+        "letter-spacing: 1.5px;"
+    )
+    table_css = (
+        "width: 100%;"
+        "border-collapse: collapse;"
+        "margin-bottom: 12px;"
+    )
+    th_css = (
+        "text-align: left;"
+        "padding: 6px 12px;"
+        "border-bottom: 1px solid #30363d;"
+        "color: #58a6ff;"
+        "font-size: 12px;"
+    )
+    td_css = (
+        "padding: 6px 12px;"
+        "border-bottom: 1px solid #21262d;"
+        "font-size: 13px;"
+    )
+    val_css = (
+        "color: #39ff14;"
+        "font-weight: bold;"
+    )
+
+    def row(key, value):
+        return (
+            f"<tr>"
+            f"<td style='{td_css}'>{key}</td>"
+            f"<td style='{td_css} {val_css}'>{value}</td>"
+            f"</tr>"
+        )
+
+    html = f"<div style='{css}'>"
+
+    # Environment params
+    html += f"<div style='{heading_css}'>Environment Parameters</div>"
+    html += f"<table style='{table_css}'>"
+    html += f"<tr><th style='{th_css}'>Parameter</th><th style='{th_css}'>Value</th></tr>"
+    html += row("MAX_TICKS", env.MAX_TICKS)
+    html += row("NUM_CUSTOMERS", env.NUM_CUSTOMERS)
+    html += row("NUM_INVOICES", env.NUM_INVOICES)
+    html += row("NUM_TICKETS", env.NUM_TICKETS)
+    html += row("NUM_TASKS", env.NUM_TASKS)
+    html += "</table>"
+
+    # Refund policy
+    html += f"<div style='{heading_css}'>Refund Policy</div>"
+    html += f"<table style='{table_css}'>"
+    html += f"<tr><th style='{th_css}'>Rule</th><th style='{th_css}'>Value</th></tr>"
+    html += row("Window (ticks)", refund["window_ticks"])
+    html += row("Requires Approval", refund["requires_approval"])
+    html += row("Max Amount", f"${refund['max_amount']:,.2f}")
+    html += "</table>"
+
+    # SLA rules
+    html += f"<div style='{heading_css}'>SLA Rules (ticks to resolve)</div>"
+    html += f"<table style='{table_css}'>"
+    html += f"<tr><th style='{th_css}'>Priority</th><th style='{th_css}'>Deadline (ticks)</th></tr>"
+    html += row("High", sla["high"])
+    html += row("Medium", sla["medium"])
+    html += row("Low", sla["low"])
+    html += "</table>"
+
+    html += "</div>"
+    return html

replay_html.py

@@ -0,0 +1,518 @@
+"""Enhanced cybersecurity-themed replay HTML renderer for SentinelOps Arena."""
+
+import html as _html
+
+
+def _esc(text):
+    """HTML-escape a string."""
+    return _html.escape(str(text))
+
+
+def format_replay_html(log, scores):
+    """Format replay log as visually stunning cybersecurity-themed HTML."""
+
+    # --- Phase definitions ---
+    PHASES = [
+        (0, 6, "RECONNAISSANCE PHASE", "#00ff41", "\u25c9", "Scanning enterprise systems..."),
+        (7, 13, "SCHEMA DRIFT ATTACK", "#ff2a2a", "\u26a0", "Database schemas compromised!"),
+        (14, 19, "POLICY DRIFT ATTACK", "#ff8c00", "\u2622", "Business policies mutating!"),
+        (20, 24, "SOCIAL ENGINEERING", "#bf5fff", "\u2620", "Manipulation attempt detected!"),
+        (25, 29, "RATE LIMITING", "#ffd700", "\u26a1", "API throttle engaged!"),
+    ]
+
+    def get_phase(tick):
+        for start, end, name, color, icon, desc in PHASES:
+            if start <= tick <= end:
+                return name, color, icon, desc
+        return "UNKNOWN PHASE", "#888", "\u2022", ""
+
+    # Agent colors
+    AGENT_COLORS = {
+        "attacker": "#ff4444",
+        "worker": "#4d9fff",
+        "oversight": "#00ff41",
+    }
+
+    AGENT_ICONS = {
+        "attacker": "\u2694",
+        "worker": "\u2699",
+        "oversight": "\u2691",
+    }
+
+    AGENT_BG = {
+        "attacker": "rgba(255,68,68,0.08)",
+        "worker": "rgba(77,159,255,0.08)",
+        "oversight": "rgba(0,255,65,0.08)",
+    }
+
+    # --- Build HTML ---
+    html = f"""<div style="
+        font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
+        font-size: 13px;
+        background: #0d1117;
+        color: #c9d1d9;
+        padding: 24px;
+        border-radius: 12px;
+        border: 1px solid #00ff4133;
+        position: relative;
+        overflow: hidden;
+    ">
+    <!-- Scanline overlay -->
+    <div style="
+        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+        background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0,255,65,0.015) 2px,
+            rgba(0,255,65,0.015) 4px
+        );
+        pointer-events: none;
+        z-index: 0;
+    "></div>
+
+    <div style="position: relative; z-index: 1;">
+
+    <!-- Header -->
+    <div style="
+        text-align: center;
+        margin-bottom: 24px;
+        padding: 16px;
+        border: 1px solid #00ff4144;
+        border-radius: 8px;
+        background: linear-gradient(135deg, rgba(0,255,65,0.05), rgba(0,255,65,0.02));
+    ">
+        <div style="
+            font-size: 22px;
+            font-weight: bold;
+            color: #00ff41;
+            letter-spacing: 4px;
+            text-shadow: 0 0 10px rgba(0,255,65,0.4);
+            margin-bottom: 4px;
+        ">\u2588\u2588 SENTINELOPS ARENA \u2588\u2588</div>
+        <div style="
+            font-size: 11px;
+            color: #58a6ff;
+            letter-spacing: 2px;
+        ">EPISODE REPLAY \u2502 MULTI-AGENT SECURITY SIMULATION</div>
+        <div style="
+            margin-top: 8px;
+            font-size: 10px;
+            color: #484f58;
+            letter-spacing: 1px;
+        ">\u250c\u2500 RED TEAM vs BLUE TEAM vs AUDITOR \u2500\u2510</div>
+    </div>
+
+    <!-- Agent legend -->
+    <div style="
+        display: flex;
+        justify-content: center;
+        gap: 24px;
+        margin-bottom: 20px;
+        padding: 8px 16px;
+        background: rgba(22,27,34,0.8);
+        border-radius: 6px;
+        border: 1px solid #21262d;
+    ">"""
+
+    for agent_key, label in [("attacker", "RED TEAM"), ("worker", "BLUE TEAM"), ("oversight", "AUDITOR")]:
+        color = AGENT_COLORS[agent_key]
+        icon = AGENT_ICONS[agent_key]
+        html += f"""
+        <div style="display:flex; align-items:center; gap:6px;">
+            <span style="
+                display:inline-block; width:10px; height:10px;
+                background:{color}; border-radius:50%;
+                box-shadow: 0 0 6px {color}88;
+            "></span>
+            <span style="color:{color}; font-size:11px; font-weight:bold; letter-spacing:1px;">
+                {icon} {label}
+            </span>
+        </div>"""
+
+    html += """
+    </div>
+    """
+
+    # --- Render log entries grouped by tick ---
+    current_tick = -1
+    current_phase = None
+
+    for entry in log:
+        tick = entry["tick"]
+        phase_name, phase_color, phase_icon, phase_desc = get_phase(tick)
+
+        # Phase header when phase changes
+        if phase_name != current_phase:
+            current_phase = phase_name
+            # Determine banner style
+            if phase_name == "RECONNAISSANCE PHASE":
+                banner_bg = "linear-gradient(90deg, rgba(0,255,65,0.12), rgba(0,255,65,0.03))"
+                border_col = "#00ff4155"
+            elif phase_name == "SCHEMA DRIFT ATTACK":
+                banner_bg = "linear-gradient(90deg, rgba(255,42,42,0.15), rgba(255,42,42,0.03))"
+                border_col = "#ff2a2a66"
+            elif phase_name == "POLICY DRIFT ATTACK":
+                banner_bg = "linear-gradient(90deg, rgba(255,140,0,0.15), rgba(255,140,0,0.03))"
+                border_col = "#ff8c0066"
+            elif phase_name == "SOCIAL ENGINEERING":
+                banner_bg = "linear-gradient(90deg, rgba(191,95,255,0.15), rgba(191,95,255,0.03))"
+                border_col = "#bf5fff66"
+            elif phase_name == "RATE LIMITING":
+                banner_bg = "linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,215,0,0.03))"
+                border_col = "#ffd70066"
+            else:
+                banner_bg = "rgba(50,50,50,0.3)"
+                border_col = "#333"
+
+            html += f"""
+    <div style="
+        margin: 20px 0 12px 0;
+        padding: 10px 16px;
+        background: {banner_bg};
+        border: 1px solid {border_col};
+        border-left: 4px solid {phase_color};
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    ">
+        <span style="font-size:20px;">{phase_icon}</span>
+        <div>
+            <div style="
+                font-size: 14px;
+                font-weight: bold;
+                color: {phase_color};
+                letter-spacing: 3px;
+                text-shadow: 0 0 8px {phase_color}55;
+            ">{phase_name}</div>
+            <div style="font-size:10px; color:#8b949e; margin-top:2px; letter-spacing:1px;">
+                {phase_desc}
+            </div>
+        </div>
+        <div style="margin-left:auto; font-size:10px; color:#484f58;">
+            TICKS {next((f'{p[0]:02d}-{p[1]:02d}' for p in PHASES if p[2] == phase_name), '??-??')}
+        </div>
+    </div>"""
+
+        # Tick divider
+        if tick != current_tick:
+            current_tick = tick
+            html += f"""
+    <div style="
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 12px 0 8px 0;
+        color: #484f58;
+        font-size: 10px;
+        letter-spacing: 1px;
+    ">
+        <div style="flex:1; height:1px; background: linear-gradient(90deg, #21262d, transparent);"></div>
+        <span style="color: #58a6ff;">\u25c8 TICK {tick:02d}</span>
+        <div style="flex:1; height:1px; background: linear-gradient(90deg, transparent, #21262d);"></div>
+    </div>"""
+
+        agent = entry["agent"]
+        color = AGENT_COLORS.get(agent, "#888")
+        icon = AGENT_ICONS.get(agent, "\u2022")
+        bg = AGENT_BG.get(agent, "rgba(50,50,50,0.1)")
+        reward = entry["reward"]
+        action_type = entry["action_type"]
+        is_flagged = entry.get("flag", False)
+
+        # Detect special events
+        is_attack_launch = action_type == "launch_attack"
+        is_recovery = action_type in ("get_schema", "get_current_policy")
+
+        # Full-width attack launch banner
+        if is_attack_launch:
+            details_str = str(entry.get("details", ""))
+            # Determine attack type from details
+            if "schema_drift" in details_str:
+                atk_label = "SCHEMA DRIFT"
+                atk_icon = "\u26a0"
+                atk_color = "#ff2a2a"
+                atk_bg = "rgba(255,42,42,0.12)"
+            elif "policy_drift" in details_str:
+                atk_label = "POLICY DRIFT"
+                atk_icon = "\u2622"
+                atk_color = "#ff8c00"
+                atk_bg = "rgba(255,140,0,0.12)"
+            elif "social_engineering" in details_str:
+                atk_label = "SOCIAL ENGINEERING"
+                atk_icon = "\u2620"
+                atk_color = "#bf5fff"
+                atk_bg = "rgba(191,95,255,0.12)"
+            elif "rate_limit" in details_str:
+                atk_label = "RATE LIMIT"
+                atk_icon = "\u26a1"
+                atk_color = "#ffd700"
+                atk_bg = "rgba(255,215,0,0.12)"
+            else:
+                atk_label = "UNKNOWN ATTACK"
+                atk_icon = "\u2753"
+                atk_color = "#ff4444"
+                atk_bg = "rgba(255,68,68,0.12)"
+
+            html += f"""
+    <div style="
+        margin: 8px 0;
+        padding: 12px 16px;
+        background: {atk_bg};
+        border: 1px solid {atk_color}55;
+        border-radius: 6px;
+        text-align: center;
+    ">
+        <div style="font-size:24px; margin-bottom:4px;">{atk_icon}</div>
+        <div style="
+            font-size: 16px;
+            font-weight: bold;
+            color: {atk_color};
+            letter-spacing: 4px;
+            text-shadow: 0 0 12px {atk_color}66;
+        ">ATTACK LAUNCHED: {atk_label}</div>
+        <div style="font-size:10px; color:#8b949e; margin-top:4px;">
+            {_esc(str(entry.get('details', ''))[:100])}
+        </div>
+        <div style="
+            margin-top: 6px;
+            display: inline-block;
+            padding: 2px 8px;
+            background: {atk_color}22;
+            border: 1px solid {atk_color}44;
+            border-radius: 3px;
+            font-size: 10px;
+            color: {atk_color};
+        ">{icon} RED TEAM \u2502 Reward: {reward:.1f}</div>
+    </div>"""
+            continue
+
+        # Regular action card
+        # Build badges
+        badges = ""
+        if is_recovery:
+            badges += f"""<span style="
+                display: inline-block;
+                padding: 1px 8px;
+                background: rgba(0,255,65,0.15);
+                border: 1px solid #00ff4155;
+                border-radius: 3px;
+                font-size: 9px;
+                color: #00ff41;
+                font-weight: bold;
+                letter-spacing: 1px;
+                margin-left: 8px;
+            ">\u2714 RECOVERY</span>"""
+
+        if is_flagged:
+            badges += f"""<span style="
+                display: inline-block;
+                padding: 1px 8px;
+                background: rgba(255,42,42,0.15);
+                border: 1px solid #ff2a2a55;
+                border-radius: 3px;
+                font-size: 9px;
+                color: #ff2a2a;
+                font-weight: bold;
+                letter-spacing: 1px;
+                margin-left: 8px;
+            ">\u26a0 FLAGGED</span>"""
+
+        # Reward badge color
+        if reward > 0:
+            reward_color = "#00ff41"
+            reward_bg = "rgba(0,255,65,0.1)"
+        elif reward < 0:
+            reward_color = "#ff4444"
+            reward_bg = "rgba(255,68,68,0.1)"
+        else:
+            reward_color = "#484f58"
+            reward_bg = "rgba(72,79,88,0.1)"
+
+        reward_str = f"+{reward:.1f}" if reward > 0 else f"{reward:.1f}"
+
+        html += f"""
+    <div style="
+        margin: 4px 0;
+        padding: 8px 12px;
+        background: {bg};
+        border-left: 3px solid {color};
+        border-radius: 0 6px 6px 0;
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        transition: all 0.2s;
+    ">
+        <!-- Agent icon -->
+        <div style="
+            min-width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: {color}22;
+            border: 1px solid {color}44;
+            border-radius: 50%;
+            font-size: 14px;
+        ">{icon}</div>
+
+        <!-- Content -->
+        <div style="flex:1; min-width:0;">
+            <div style="display:flex; align-items:center; flex-wrap:wrap; gap:4px;">
+                <span style="
+                    color: {color};
+                    font-weight: bold;
+                    font-size: 11px;
+                    letter-spacing: 1px;
+                ">{entry['agent_label']}</span>
+                <span style="color:#484f58; font-size:11px;">\u25b8</span>
+                <span style="
+                    color: #e6edf3;
+                    font-size: 12px;
+                    font-weight: 600;
+                ">{action_type}</span>
+                {badges}
+            </div>"""
+
+        details = entry.get("details", "")
+        if details:
+            html += f"""
+            <div style="
+                margin-top: 4px;
+                padding: 4px 8px;
+                background: rgba(22,27,34,0.6);
+                border-radius: 4px;
+                font-size: 11px;
+                color: #8b949e;
+                word-break: break-word;
+                border: 1px solid #21262d;
+            ">{_esc(str(details)[:150])}</div>"""
+
+        explanation = entry.get("explanation", "")
+        if explanation:
+            exp_color = "#ff4444" if is_flagged else "#00ff41"
+            exp_icon = "\u26a0" if is_flagged else "\u2714"
+            html += f"""
+            <div style="
+                margin-top: 4px;
+                font-size: 10px;
+                color: {exp_color};
+                opacity: 0.85;
+                padding-left: 4px;
+            ">{exp_icon} {_esc(explanation)}</div>"""
+
+        html += f"""
+        </div>
+
+        <!-- Reward -->
+        <div style="
+            min-width: 52px;
+            text-align: right;
+            padding: 3px 8px;
+            background: {reward_bg};
+            border-radius: 4px;
+            font-size: 11px;
+            font-weight: bold;
+            color: {reward_color};
+        ">{reward_str}</div>
+    </div>"""
+
+    # --- Final Scores ---
+    html += """
+    <div style="
+        margin-top: 28px;
+        padding: 16px;
+        border: 1px solid #00ff4133;
+        border-radius: 8px;
+        background: linear-gradient(135deg, rgba(0,255,65,0.04), rgba(22,27,34,0.8));
+    ">
+        <div style="
+            text-align: center;
+            font-size: 14px;
+            font-weight: bold;
+            color: #00ff41;
+            letter-spacing: 3px;
+            margin-bottom: 16px;
+            text-shadow: 0 0 8px rgba(0,255,65,0.3);
+        ">\u2588 FINAL SCORES \u2588</div>
+    """
+
+    max_score = max(abs(s) for s in scores.values()) if scores else 1
+    if max_score == 0:
+        max_score = 1
+
+    for agent_key, score in scores.items():
+        color = AGENT_COLORS.get(agent_key, "#888")
+        icon = AGENT_ICONS.get(agent_key, "\u2022")
+        label_map = {"attacker": "RED TEAM", "worker": "BLUE TEAM", "oversight": "AUDITOR"}
+        label = label_map.get(agent_key, agent_key.upper())
+
+        # Bar width as percentage (handle negative scores)
+        bar_pct = max(0, min((score / max_score) * 100, 100)) if score > 0 else 0
+
+        # Score display color
+        if score > 0:
+            score_display_color = "#00ff41"
+        elif score < 0:
+            score_display_color = "#ff4444"
+        else:
+            score_display_color = "#484f58"
+
+        html += f"""
+        <div style="margin-bottom: 12px;">
+            <div style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 4px;
+            ">
+                <div style="display:flex; align-items:center; gap:8px;">
+                    <span style="font-size:14px;">{icon}</span>
+                    <span style="
+                        color: {color};
+                        font-weight: bold;
+                        font-size: 12px;
+                        letter-spacing: 1px;
+                    ">{label}</span>
+                </div>
+                <span style="
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: {score_display_color};
+                    text-shadow: 0 0 6px {score_display_color}44;
+                ">{score:.1f}</span>
+            </div>
+            <div style="
+                height: 8px;
+                background: #161b22;
+                border-radius: 4px;
+                border: 1px solid #21262d;
+                overflow: hidden;
+            ">
+                <div style="
+                    height: 100%;
+                    width: {bar_pct:.1f}%;
+                    background: linear-gradient(90deg, {color}, {color}88);
+                    border-radius: 4px;
+                    box-shadow: 0 0 8px {color}44;
+                "></div>
+            </div>
+        </div>"""
+
+    html += """
+    </div>
+
+    <!-- Footer -->
+    <div style="
+        text-align: center;
+        margin-top: 16px;
+        font-size: 9px;
+        color: #30363d;
+        letter-spacing: 2px;
+    ">SENTINELOPS ARENA \u2502 OPENENV HACKATHON SF 2026</div>
+
+    </div><!-- end relative z-index wrapper -->
+    </div><!-- end outer container -->"""
+
+    return html

requirements.txt

@@ -1,5 +1,5 @@
 openenv-core[core]>=0.2.0
-gradio>=5.0.0
+gradio>=6.0.0
 fastmcp>=2.14.5
 pydantic>=2.0
 mcp>=1.26.0

sentinel_theme.py

@@ -0,0 +1,482 @@
+"""SentinelOps Arena -- Custom Gradio 6 cybersecurity theme."""
+
+from __future__ import annotations
+
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+
+class SentinelTheme(Base):
+    """Dark cybersecurity / hacking aesthetic theme for SentinelOps Arena."""
+
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.red,
+        neutral_hue: colors.Color | str = colors.slate,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | list[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "SFMono-Regular",
+            "monospace",
+        ),
+        font_mono: fonts.Font | str | list[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "Consolas",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+
+        # -- Core surface colors -------------------------------------------------
+        self.body_background_fill = "#0a0f1a"
+        self.body_background_fill_dark = "#0a0f1a"
+        self.body_text_color = "#c9d1d9"
+        self.body_text_color_dark = "#c9d1d9"
+        self.body_text_color_subdued = "#8b949e"
+        self.body_text_color_subdued_dark = "#8b949e"
+
+        # -- Block / panel colours ------------------------------------------------
+        self.block_background_fill = "#111827"
+        self.block_background_fill_dark = "#111827"
+        self.block_border_color = "#1e3a2f"
+        self.block_border_color_dark = "#1e3a2f"
+        self.block_border_width = "1px"
+        self.block_label_background_fill = "#0d1520"
+        self.block_label_background_fill_dark = "#0d1520"
+        self.block_label_text_color = "#00ff41"
+        self.block_label_text_color_dark = "#00ff41"
+        self.block_shadow = "0 0 8px rgba(0, 255, 65, 0.08)"
+        self.block_shadow_dark = "0 0 8px rgba(0, 255, 65, 0.08)"
+        self.block_title_text_color = "#e6edf3"
+        self.block_title_text_color_dark = "#e6edf3"
+
+        # -- Borders & panels -----------------------------------------------------
+        self.border_color_accent = "#00ff41"
+        self.border_color_accent_dark = "#00ff41"
+        self.border_color_primary = "#1e3a2f"
+        self.border_color_primary_dark = "#1e3a2f"
+        self.panel_background_fill = "#0d1520"
+        self.panel_background_fill_dark = "#0d1520"
+        self.panel_border_color = "#1e3a2f"
+        self.panel_border_color_dark = "#1e3a2f"
+
+        # -- Primary button (cyber green) -----------------------------------------
+        self.button_primary_background_fill = "#00cc33"
+        self.button_primary_background_fill_dark = "#00cc33"
+        self.button_primary_background_fill_hover = "#00ff41"
+        self.button_primary_background_fill_hover_dark = "#00ff41"
+        self.button_primary_text_color = "#0a0f1a"
+        self.button_primary_text_color_dark = "#0a0f1a"
+        self.button_primary_border_color = "#00ff41"
+        self.button_primary_border_color_dark = "#00ff41"
+        self.button_primary_shadow = "0 0 12px rgba(0, 255, 65, 0.3)"
+
+        # -- Secondary button -----------------------------------------------------
+        self.button_secondary_background_fill = "#1a1f2e"
+        self.button_secondary_background_fill_dark = "#1a1f2e"
+        self.button_secondary_background_fill_hover = "#252b3b"
+        self.button_secondary_background_fill_hover_dark = "#252b3b"
+        self.button_secondary_text_color = "#c9d1d9"
+        self.button_secondary_text_color_dark = "#c9d1d9"
+        self.button_secondary_border_color = "#30363d"
+        self.button_secondary_border_color_dark = "#30363d"
+
+        # -- Inputs ---------------------------------------------------------------
+        self.input_background_fill = "#0d1520"
+        self.input_background_fill_dark = "#0d1520"
+        self.input_border_color = "#1e3a2f"
+        self.input_border_color_dark = "#1e3a2f"
+        self.input_border_color_focus = "#00ff41"
+        self.input_border_color_focus_dark = "#00ff41"
+        self.input_placeholder_color = "#484f58"
+        self.input_placeholder_color_dark = "#484f58"
+        self.input_text_color = "#c9d1d9"
+
+        # -- Checkbox / toggle ----------------------------------------------------
+        self.checkbox_background_color = "#0d1520"
+        self.checkbox_background_color_dark = "#0d1520"
+        self.checkbox_background_color_selected = "#00cc33"
+        self.checkbox_background_color_selected_dark = "#00cc33"
+        self.checkbox_border_color = "#30363d"
+        self.checkbox_border_color_dark = "#30363d"
+        self.checkbox_border_color_selected = "#00ff41"
+        self.checkbox_border_color_selected_dark = "#00ff41"
+        self.checkbox_label_text_color = "#c9d1d9"
+
+        # -- Table / code ---------------------------------------------------------
+        self.table_border_color = "#1e3a2f"
+        self.table_border_color_dark = "#1e3a2f"
+        self.table_even_background_fill = "#111827"
+        self.table_even_background_fill_dark = "#111827"
+        self.table_odd_background_fill = "#0d1520"
+        self.table_odd_background_fill_dark = "#0d1520"
+        self.code_background_fill = "#0d1520"
+        self.code_background_fill_dark = "#0d1520"
+
+        # -- Shadows & misc ------------------------------------------------------
+        self.shadow_spread = "4px"
+        self.shadow_drop = "0 2px 6px rgba(0, 0, 0, 0.4)"
+        self.shadow_drop_lg = "0 4px 16px rgba(0, 0, 0, 0.5)"
+
+
+# ---------------------------------------------------------------------------
+# Custom CSS
+# ---------------------------------------------------------------------------
+
+CUSTOM_CSS = """
+/* ====================== ROOT OVERRIDES ====================== */
+:root {
+    --sentinel-green: #00ff41;
+    --sentinel-green-dim: #00cc33;
+    --sentinel-red: #ff4444;
+    --sentinel-blue: #4488ff;
+    --sentinel-bg: #0a0f1a;
+    --sentinel-surface: #111827;
+    --sentinel-surface-alt: #0d1520;
+    --sentinel-border: #1e3a2f;
+    --sentinel-text: #c9d1d9;
+}
+
+/* ====================== GLOBAL ====================== */
+.gradio-container {
+    background: var(--sentinel-bg) !important;
+    max-width: 1200px !important;
+}
+
+/* ====================== TAB HEADERS ====================== */
+.tab-nav button {
+    background: var(--sentinel-surface) !important;
+    color: var(--sentinel-text) !important;
+    border: 1px solid var(--sentinel-border) !important;
+    border-bottom: none !important;
+    font-family: 'IBM Plex Mono', monospace !important;
+    font-size: 0.85rem !important;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    padding: 10px 20px !important;
+    transition: all 0.2s ease;
+}
+
+.tab-nav button:hover {
+    background: #1a2332 !important;
+    color: var(--sentinel-green) !important;
+}
+
+.tab-nav button.selected {
+    background: var(--sentinel-surface-alt) !important;
+    color: var(--sentinel-green) !important;
+    border-top: 2px solid var(--sentinel-green) !important;
+    box-shadow: 0 -2px 8px rgba(0, 255, 65, 0.15);
+}
+
+/* ====================== AGENT COLOR ACCENTS ====================== */
+.attacker-red {
+    border-left: 3px solid var(--sentinel-red) !important;
+    padding-left: 12px !important;
+}
+
+.attacker-red .label-wrap span,
+.attacker-red label span {
+    color: var(--sentinel-red) !important;
+}
+
+.worker-blue {
+    border-left: 3px solid var(--sentinel-blue) !important;
+    padding-left: 12px !important;
+}
+
+.worker-blue .label-wrap span,
+.worker-blue label span {
+    color: var(--sentinel-blue) !important;
+}
+
+.oversight-green {
+    border-left: 3px solid var(--sentinel-green) !important;
+    padding-left: 12px !important;
+}
+
+.oversight-green .label-wrap span,
+.oversight-green label span {
+    color: var(--sentinel-green) !important;
+}
+
+/* ====================== GLOWING CARD BORDERS ====================== */
+.glow-card {
+    border: 1px solid var(--sentinel-border) !important;
+    border-radius: 8px !important;
+    box-shadow: 0 0 10px rgba(0, 255, 65, 0.06),
+                inset 0 0 10px rgba(0, 255, 65, 0.02) !important;
+    transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.glow-card:hover {
+    border-color: rgba(0, 255, 65, 0.4) !important;
+    box-shadow: 0 0 18px rgba(0, 255, 65, 0.12),
+                inset 0 0 12px rgba(0, 255, 65, 0.04) !important;
+}
+
+/* ====================== PRIMARY BUTTONS GLOW ====================== */
+button.primary {
+    box-shadow: 0 0 12px rgba(0, 255, 65, 0.25) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+    font-weight: 700 !important;
+    transition: all 0.2s ease !important;
+}
+
+button.primary:hover {
+    box-shadow: 0 0 20px rgba(0, 255, 65, 0.45) !important;
+    transform: translateY(-1px);
+}
+
+/* ====================== HEADER BANNER ====================== */
+.sentinel-header {
+    text-align: center;
+    padding: 32px 20px 24px;
+    background: linear-gradient(180deg, #0d1a10 0%, var(--sentinel-bg) 100%);
+    border-bottom: 1px solid var(--sentinel-border);
+    margin-bottom: 16px;
+    position: relative;
+    overflow: hidden;
+}
+
+.sentinel-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--sentinel-green) 20%,
+        var(--sentinel-red) 50%,
+        var(--sentinel-blue) 80%,
+        transparent 100%
+    );
+}
+
+.sentinel-header h1 {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 2.4rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #00ff41 0%, #00cc88 40%, #44ffaa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0 0 6px 0;
+    letter-spacing: 0.04em;
+    text-shadow: none;
+}
+
+.sentinel-header .subtitle {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.95rem;
+    color: #8b949e;
+    letter-spacing: 0.06em;
+    margin-bottom: 20px;
+}
+
+/* ---- Agent badges ---- */
+.agent-badges {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-top: 8px;
+}
+
+.agent-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    border-radius: 6px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    border: 1px solid;
+}
+
+.badge-red {
+    color: var(--sentinel-red);
+    border-color: rgba(255, 68, 68, 0.4);
+    background: rgba(255, 68, 68, 0.08);
+}
+
+.badge-blue {
+    color: var(--sentinel-blue);
+    border-color: rgba(68, 136, 255, 0.4);
+    background: rgba(68, 136, 255, 0.08);
+}
+
+.badge-green {
+    color: var(--sentinel-green);
+    border-color: rgba(0, 255, 65, 0.4);
+    background: rgba(0, 255, 65, 0.08);
+}
+
+.badge-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.badge-red .badge-dot { background: var(--sentinel-red); }
+.badge-blue .badge-dot { background: var(--sentinel-blue); }
+.badge-green .badge-dot { background: var(--sentinel-green); }
+
+/* Built-on OpenEnv badge */
+.openenv-badge {
+    display: inline-block;
+    margin-top: 16px;
+    padding: 4px 14px;
+    border-radius: 20px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.7rem;
+    color: #8b949e;
+    border: 1px solid #30363d;
+    background: rgba(255, 255, 255, 0.03);
+    letter-spacing: 0.06em;
+}
+
+.openenv-badge a {
+    color: #58a6ff;
+    text-decoration: none;
+}
+
+.openenv-badge a:hover {
+    text-decoration: underline;
+}
+
+/* ====================== ATTACK ALERT PULSE ====================== */
+@keyframes alert-pulse {
+    0%, 100% { box-shadow: 0 0 4px rgba(255, 68, 68, 0.2); }
+    50% { box-shadow: 0 0 16px rgba(255, 68, 68, 0.4); }
+}
+
+.attack-alert {
+    animation: alert-pulse 2.5s ease-in-out infinite;
+    border: 1px solid rgba(255, 68, 68, 0.3) !important;
+}
+
+/* ====================== SCAN LINE DECORATION ====================== */
+@keyframes scanline {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
+}
+
+.sentinel-header::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background: linear-gradient(
+        180deg,
+        transparent 0%,
+        rgba(0, 255, 65, 0.02) 50%,
+        transparent 100%
+    );
+    animation: scanline 8s linear infinite;
+    pointer-events: none;
+}
+
+/* ====================== MARKDOWN / TEXT READABILITY ====================== */
+.prose h1, .prose h2, .prose h3 {
+    color: #e6edf3 !important;
+}
+
+.prose p, .prose li {
+    color: #c9d1d9 !important;
+}
+
+.prose strong {
+    color: #e6edf3 !important;
+}
+
+.prose a {
+    color: #58a6ff !important;
+}
+
+.prose code {
+    background: var(--sentinel-surface-alt) !important;
+    color: var(--sentinel-green) !important;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.prose hr {
+    border-color: var(--sentinel-border) !important;
+}
+
+/* ====================== CODE BLOCKS ====================== */
+.code-wrap, .cm-editor {
+    background: var(--sentinel-surface-alt) !important;
+    border: 1px solid var(--sentinel-border) !important;
+}
+
+/* ====================== SCROLLBAR ====================== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--sentinel-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #30363d;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #484f58;
+}
+"""
+
+# ---------------------------------------------------------------------------
+# Header HTML
+# ---------------------------------------------------------------------------
+
+HEADER_HTML = """\
+<div class="sentinel-header">
+    <h1>SentinelOps Arena</h1>
+    <div class="subtitle">Multi-Agent Self-Play RL for Enterprise Security</div>
+    <div class="agent-badges">
+        <span class="agent-badge badge-red">
+            <span class="badge-dot"></span>RED TEAM
+        </span>
+        <span class="agent-badge badge-blue">
+            <span class="badge-dot"></span>BLUE TEAM
+        </span>
+        <span class="agent-badge badge-green">
+            <span class="badge-dot"></span>AUDITOR
+        </span>
+    </div>
+    <div class="openenv-badge">
+        Built on <a href="https://github.com/meta-pytorch/OpenEnv" target="_blank">OpenEnv</a>
+    </div>
+</div>
+"""