Spaces:

molliexx99
/

maias

Running

App Files Files Community

molliexx99 commited on Aug 18

Commit

8f2503b

verified ·

1 Parent(s): 16f4336

Please ensure that the hint/info boxes do not get obstructed by the edges of the timeline's area, ensure that these boxes are on-top/overlay any/all other visual elements on the web-page. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1215 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Maias
-emoji: 🏆
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: maias
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Agent Orchestration Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981',
+                        accent: '#8b5cf6',
+                        warning: '#f59e0b',
+                        danger: '#ef4444',
+                        dark: '#1e293b',
+                        light: '#f8fafc'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #0f172a, #1e293b);
+            color: #f1f5f9;
+        }
+        .card {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(100, 116, 139, 0.3);
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
+        }
+        .card-header {
+            border-bottom: 1px solid rgba(148, 163, 184, 0.3);
+            padding-bottom: 1rem;
+        }
+        .btn {
+            font-weight: 600;
+            padding: 0.75rem 1.5rem;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .btn-primary {
+            background: linear-gradient(90deg, #3b82f6, #60a5fa);
+            color: white;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(90deg, #2563eb, #3b82f6);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
+        }
+        .btn-secondary {
+            background: rgba(100, 116, 139, 0.3);
+            color: #f1f5f9;
+        }
+        .btn-secondary:hover {
+            background: rgba(100, 116, 139, 0.5);
+            transform: translateY(-2px);
+        }
+        .btn-danger {
+            background: linear-gradient(90deg, #ef4444, #f87171);
+            color: white;
+        }
+        .btn-danger:hover {
+            background: linear-gradient(90deg, #dc2626, #ef4444);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
+        }
+        .btn-icon {
+            margin-right: 0.5rem;
+        }
+        .toggle-container {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+        }
+        .toggle-container input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, #334155, #475569);
+            transition: .4s;
+            border-radius: 30px;
+        }
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .toggle-slider {
+            background: linear-gradient(90deg, #3b82f6, #60a5fa);
+        }
+        input:checked + .toggle-slider:before {
+            transform: translateX(30px);
+        }
+        .agent-timeline {
+            max-height: 500px;
+            overflow-y: auto;
+            padding-right: 10px;
+        }
+        .timeline-container {
+            min-height: 600px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+        }
+        .agent-timeline {
+            flex: 1;
+            overflow-y: auto;
+        }
+        .timeline-item {
+            position: relative;
+            padding-left: 40px;
+            margin-bottom: 30px;
+        }
+        .timeline-item:before {
+            content: '';
+            position: absolute;
+            left: 15px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, #3b82f6, #94a3b8);
+        }
+        .timeline-item:last-child:before {
+            height: 20px;
+        }
+        .avatar {
+            position: absolute;
+            left: -15px;
+            top: 0;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            font-size: 14px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            z-index: 2;
+        }
+        .collapsible-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .collapsible-content.active {
+            max-height: 500px;
+        }
+        .decision-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .decision-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        .tool-call {
+            background: rgba(255, 255, 255, 0.05);
+            border-left: 3px solid #3b82f6;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            position: relative;
+        }
+        .tool-call:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        /* Hover info tooltip */
+        .hover-info {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(30, 41, 59, 0.95);
+            color: #f1f5f9;
+            padding: 12px;
+            border-radius: 8px;
+            width: 300px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+            border: 1px solid rgba(100, 116, 139, 0.5);
+            font-size: 0.9rem;
+            pointer-events: none;
+        }
+        .hover-info:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent;
+            border-top-color: rgba(30, 41, 59, 0.95);
+        }
+        .timeline-item:hover .hover-info {
+            opacity: 1;
+            visibility: visible;
+        }
+        /* Adjust positioning for edge cases */
+        .timeline-item:first-child .hover-info {
+            transform: translateX(-50%);
+            left: 50%;
+        }
+        .timeline-item:last-child .hover-info {
+            transform: translateX(-50%);
+            left: 50%;
+        }
+        /* Ensure tooltip stays within viewport */
+        @media (max-width: 768px) {
+            .hover-info {
+                left: 0;
+                transform: none;
+                width: calc(100vw - 80px);
+                right: 20px;
+            }
+            .hover-info:before {
+                left: 20px;
+                transform: none;
+            }
+        }
+        .hover-info h4 {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #60a5fa;
+        }
+        .hover-info p {
+            margin: 0 0 10px 0;
+            line-height: 1.4;
+        }
+        .hover-info .role {
+            font-style: italic;
+            color: #94a3b8;
+            font-size: 0.85rem;
+            margin-bottom: 8px;
+        }
+        .hover-info .function {
+            background: rgba(59, 130, 246, 0.2);
+            padding: 8px;
+            border-radius: 6px;
+            margin-top: 8px;
+        }
+        /* Adjust for top edge visibility */
+        .agent-timeline {
+            padding: 20px 10px 20px 40px;
+            position: relative;
+        }
+        .scenario-card {
+            transition: all 0.2s ease;
+        }
+        .scenario-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .form-control {
+            background: rgba(15, 23, 42, 0.5);
+            border: 1px solid rgba(148, 163, 184, 0.3);
+            border-radius: 12px;
+            padding: 0.75rem;
+            color: #f1f5f9;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        .form-control:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+        }
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+        .status-approved {
+            background: linear-gradient(90deg, #10b981, #34d399);
+            color: white;
+        }
+        .status-blocked {
+            background: linear-gradient(90deg, #ef4444, #f87171);
+            color: white;
+        }
+        .status-manual {
+            background: linear-gradient(90deg, #f59e0b, #fbbf24);
+            color: #1e293b;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-white mb-2">Multi-Agent Orchestration Demo</h1>
+            <p class="text-slate-300 max-w-3xl mx-auto">Simulating intelligent coordination between agents across different scenarios</p>
+        </header>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column - Controls -->
+            <div class="lg:col-span-1 space-y-6">
+                <!-- Scenario Selector -->
+                <div class="card p-6">
+                    <h2 class="text-xl font-bold text-white mb-4">Scenario Selection</h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="form-label">Select Scenario</label>
+                            <select id="scenarioSelector" class="form-control">
+                                <option value="devops">DevOps Release Gate</option>
+                                <option value="security">Security Alert Triage</option>
+                                <option value="data">Data Pipeline Publish</option>
+                                <option value="it">IT Onboarding (Helpdesk)</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center justify-between pt-2">
+                            <div class="flex items-center">
+                                <span class="mr-3 text-sm font-medium text-slate-300">Mode:</span>
+                                <div class="toggle-container">
+                                    <input type="checkbox" id="modeToggle">
+                                    <span class="toggle-slider"></span>
+                                </div>
+                                <span class="ml-3 text-sm font-medium text-slate-300">Demo</span>
+                                <span class="ml-1 text-sm font-medium text-slate-300">Live</span>
+                            </div>
+                            <button id="runButton" class="btn btn-primary">
+                                <i class="fas fa-play btn-icon"></i> Run Orchestration
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Dynamic Form -->
+                <div class="card p-6">
+                    <h2 class="text-xl font-bold text-white mb-4">Scenario Inputs</h2>
+                    <div id="dynamicForm" class="space-y-4">
+                        <!-- Form will be populated dynamically -->
+                    </div>
+                </div>
+                <!-- Final Decision -->
+                <div id="decisionCard" class="card p-6 hidden">
+                    <h2 class="text-xl font-bold text-white mb-4">Final Decision</h2>
+                    <div id="decisionContent" class="text-center">
+                        <!-- Decision content will be populated dynamically -->
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column - Agent Timeline -->
+            <div class="lg:col-span-2 flex flex-col h-full">
+                <div class="card p-6 flex-grow flex flex-col timeline-container">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold text-white">Agent Orchestration Timeline</h2>
+                        <div class="flex space-x-2">
+                            <button id="clearTimeline" class="btn btn-secondary">
+                                <i class="fas fa-trash btn-icon"></i> Clear
+                            </button>
+                        </div>
+                    </div>
+                    <div id="agentTimeline" class="agent-timeline flex-grow">
+                        <!-- Timeline items will be populated dynamically -->
+                        <div class="text-center py-10 text-slate-400">
+                            <i class="fas fa-robot text-4xl mb-3"></i>
+                            <p>No orchestration run yet. Select a scenario and click "Run Orchestration".</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Agent definitions with role descriptions
+        const agents = {
+            mastermind: {
+                name: "MasterMind",
+                color: "#3b82f6",
+                icon: "fas fa-brain",
+                role: "Orchestration coordinator that manages the workflow and makes final decisions"
+            },
+            devassist: {
+                name: "DevAssist",
+                color: "#10b981",
+                icon: "fas fa-code",
+                role: "Development expert that reviews code quality and technical implementation"
+            },
+            cyberguard: {
+                name: "CyberGuard",
+                color: "#ef4444",
+                icon: "fas fa-shield-alt",
+                role: "Security specialist that identifies risks and ensures compliance"
+            },
+            dataflow: {
+                name: "DataFlow",
+                color: "#8b5cf6",
+                icon: "fas fa-database",
+                role: "Data expert that validates data quality and pipeline integrity"
+            }
+        };
+        // Scenario definitions
+        const scenarios = {
+            devops: {
+                name: "DevOps Release Gate",
+                description: "Coordinate release approval with security and data checks",
+                formFields: [
+                    { id: "title", label: "PR Title", type: "text", placeholder: "Fix authentication bug" },
+                    { id: "diff", label: "Code Diff", type: "textarea", placeholder: "Paste code changes here..." },
+                    { id: "environment", label: "Environment", type: "select", options: ["staging", "production"] }
+                ],
+                flow: ["mastermind", "devassist", "cyberguard", "dataflow", "mastermind"]
+            },
+            security: {
+                name: "Security Alert Triage",
+                description: "Automatically triage and respond to security alerts",
+                formFields: [
+                    { id: "alert", label: "Alert JSON", type: "textarea", placeholder: '{"type": "unusual_login", "source": "192.168.1.100"}' },
+                    { id: "severity", label: "Severity", type: "select", options: ["low", "medium", "high"] }
+                ],
+                flow: ["mastermind", "cyberguard", "devassist", "mastermind"]
+            },
+            data: {
+                name: "Data Pipeline Publish",
+                description: "Validate and publish data pipelines with quality checks",
+                formFields: [
+                    { id: "dataset", label: "Dataset Name", type: "text", placeholder: "sales_data_q3_2023" },
+                    { id: "environment", label: "Environment", type: "select", options: ["staging", "production"] },
+                    { id: "notes", label: "Notes", type: "textarea", placeholder: "Additional information about this dataset..." }
+                ],
+                flow: ["mastermind", "dataflow", "cyberguard", "mastermind"]
+            },
+            it: {
+                name: "IT Onboarding (Helpdesk)",
+                description: "Automate employee onboarding with access provisioning",
+                formFields: [
+                    { id: "name", label: "Employee Name", type: "text", placeholder: "John Smith" },
+                    { id: "department", label: "Department", type: "select", options: ["Engineering", "Marketing", "Finance", "HR", "Operations"] },
+                    { id: "start_date", label: "Start Date", type: "date" },
+                    { id: "ticket_id", label: "Ticket ID (Optional)", type: "text", placeholder: "INC-12345" }
+                ],
+                flow: ["mastermind", "devassist", "cyberguard", "mastermind"]
+            }
+        };
+        // Tool definitions
+        const tools = {
+            // DevOps tools
+            "github.lint": { name: "GitHub Linter", category: "dev" },
+            "sast.scan": { name: "SAST Scanner", category: "security" },
+            "ci.build": { name: "CI Build", category: "dev" },
+            // Security tools
+            "siem.lookup": { name: "SIEM Lookup", category: "security" },
+            "threatintel.query": { name: "Threat Intel Query", category: "security" },
+            "ticket.update": { name: "Ticket Update", category: "operations" },
+            // Data tools
+            "dbt.test": { name: "DBT Test", category: "data" },
+            "airflow.dag_status": { name: "Airflow DAG Status", category: "data" },
+            "schema.registry.diff": { name: "Schema Registry Diff", category: "data" },
+            // IT tools
+            "okta.create_user": { name: "Okta Create User", category: "identity" },
+            "okta.add_group": { name: "Okta Add Group", category: "identity" },
+            "slack.invite": { name: "Slack Invite", category: "communication" },
+            "servicenow.fetch": { name: "ServiceNow Fetch", category: "operations" }
+        };
+        // DOM Elements
+        const scenarioSelector = document.getElementById('scenarioSelector');
+        const modeToggle = document.getElementById('modeToggle');
+        const runButton = document.getElementById('runButton');
+        const dynamicForm = document.getElementById('dynamicForm');
+        const agentTimeline = document.getElementById('agentTimeline');
+        const decisionCard = document.getElementById('decisionCard');
+        const decisionContent = document.getElementById('decisionContent');
+        const clearTimeline = document.getElementById('clearTimeline');
+        // Current state
+        let currentScenario = 'devops';
+        let isLiveMode = false;
+        let formData = {};
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set up event listeners
+            scenarioSelector.addEventListener('change', updateScenario);
+            modeToggle.addEventListener('change', toggleMode);
+            runButton.addEventListener('click', runOrchestration);
+            clearTimeline.addEventListener('click', clearTimelineContent);
+            // Initialize form
+            updateScenario();
+        });
+        // Update form based on selected scenario
+        function updateScenario() {
+            currentScenario = scenarioSelector.value;
+            const scenario = scenarios[currentScenario];
+            // Clear existing form
+            dynamicForm.innerHTML = '';
+            // Create form fields
+            scenario.formFields.forEach(field => {
+                const fieldElement = document.createElement('div');
+                fieldElement.className = 'space-y-1';
+                const label = document.createElement('label');
+                label.className = 'block text-sm font-medium text-gray-700';
+                label.textContent = field.label;
+                fieldElement.appendChild(label);
+                if (field.type === 'select') {
+                    const select = document.createElement('select');
+                    select.id = field.id;
+                    select.className = 'w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent';
+                    field.options.forEach(option => {
+                        const optionElement = document.createElement('option');
+                        optionElement.value = option;
+                        optionElement.textContent = option.charAt(0).toUpperCase() + option.slice(1);
+                        select.appendChild(optionElement);
+                    });
+                    fieldElement.appendChild(select);
+                } else if (field.type === 'textarea') {
+                    const textarea = document.createElement('textarea');
+                    textarea.id = field.id;
+                    textarea.className = 'w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent';
+                    textarea.placeholder = field.placeholder || '';
+                    textarea.rows = 3;
+                    fieldElement.appendChild(textarea);
+                } else {
+                    const input = document.createElement('input');
+                    input.type = field.type;
+                    input.id = field.id;
+                    input.className = 'w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent';
+                    input.placeholder = field.placeholder || '';
+                    if (field.type === 'date') {
+                        const today = new Date();
+                        input.value = today.toISOString().split('T')[0];
+                    }
+                    fieldElement.appendChild(input);
+                }
+                dynamicForm.appendChild(fieldElement);
+            });
+        }
+        // Toggle between Demo and Live mode
+        function toggleMode() {
+            isLiveMode = modeToggle.checked;
+            runButton.innerHTML = isLiveMode ?
+                '<i class="fas fa-bolt mr-2"></i> Run Live Orchestration' :
+                '<i class="fas fa-play mr-2"></i> Run Orchestration';
+            // In a real implementation, we would check for API key here
+            if (isLiveMode) {
+                alert("Live mode requires an API key. This demo only supports deterministic mode.");
+                modeToggle.checked = false;
+                isLiveMode = false;
+                runButton.innerHTML = '<i class="fas fa-play mr-2"></i> Run Orchestration';
+            }
+        }
+        // Clear timeline content
+        function clearTimelineContent() {
+            agentTimeline.innerHTML = `
+                <div class="text-center py-10 text-gray-500">
+                    <i class="fas fa-robot text-4xl mb-3"></i>
+                    <p>No orchestration run yet. Select a scenario and click "Run Orchestration".</p>
+                </div>
+            `;
+            decisionCard.classList.add('hidden');
+        }
+        // Run the orchestration
+        function runOrchestration() {
+            // Collect form data
+            formData = {};
+            const scenario = scenarios[currentScenario];
+            scenario.formFields.forEach(field => {
+                const element = document.getElementById(field.id);
+                if (element) {
+                    formData[field.id] = element.value;
+                }
+            });
+            // Clear timeline
+            agentTimeline.innerHTML = '';
+            decisionCard.classList.add('hidden');
+            // Start orchestration
+            simulateOrchestration();
+        }
+        // Simulate the orchestration process
+        async function simulateOrchestration() {
+            const scenario = scenarios[currentScenario];
+            const flow = scenario.flow;
+            // Add initial message
+            addTimelineItem(agents.mastermind, "Starting orchestration for " + scenario.name, []);
+            // Process each step in the flow
+            for (let i = 0; i < flow.length; i++) {
+                const agentKey = flow[i];
+                const agent = agents[agentKey];
+                // Add thinking message
+                addTimelineItem(agent, `Analyzing request...`, []);
+                // Simulate processing time
+                await new Promise(resolve => setTimeout(resolve, 800 + Math.random() * 700));
+                // Process agent action
+                const result = processAgentAction(agentKey, i);
+                // Add result to timeline
+                addTimelineItem(agent, result.message, result.toolCalls);
+                // Simulate processing time
+                await new Promise(resolve => setTimeout(resolve, 600 + Math.random() * 500));
+            }
+            // Show final decision
+            showFinalDecision();
+        }
+        // Process agent action based on scenario and agent
+        function processAgentAction(agentKey, stepIndex) {
+            const scenario = scenarios[currentScenario];
+            let message = "";
+            let toolCalls = [];
+            switch (currentScenario) {
+                case 'devops':
+                    switch (agentKey) {
+                        case 'mastermind':
+                            if (stepIndex === 0) {
+                                message = "Evaluating release request for: " + (formData.title || "Untitled PR");
+                                toolCalls = [
+                                    { tool: "github.lint", params: { repo: "my-app", branch: "feature-branch" }, result: "ok" }
+                                ];
+                            } else {
+                                message = "Finalizing release decision";
+                            }
+                            break;
+                        case 'devassist':
+                            const hasSecurityRisk = formData.diff && (formData.diff.includes("eval(") || formData.diff.includes("raw user input"));
+                            message = hasSecurityRisk ?
+                                "Security risk detected in code changes" :
+                                "Code review completed successfully";
+                            toolCalls = [
+                                { tool: "sast.scan", params: { target: "src/", ruleset: "default" }, result: hasSecurityRisk ? "warn" : "ok" }
+                            ];
+                            break;
+                        case 'cyberguard':
+                            const requiresApproval = formData.diff && (formData.diff.includes("eval(") || formData.diff.includes("raw user input"));
+                            message = requiresApproval ?
+                                "Manual approval required due to security policy SEC-12" :
+                                "Security checks passed";
+                            toolCalls = [
+                                { tool: "siem.lookup", params: { query: "suspicious_activity", timeframe: "24h" }, result: "ok" }
+                            ];
+                            break;
+                        case 'dataflow':
+                            const env = formData.environment || "staging";
+                            message = env === "production" ?
+                                "Production deployment requires additional validation" :
+                                "Staging environment ready for deployment";
+                            toolCalls = [
+                                { tool: "airflow.dag_status", params: { dag_id: "deployment_pipeline" }, result: "ok" }
+                            ];
+                            break;
+                    }
+                    break;
+                case 'security':
+                    switch (agentKey) {
+                        case 'mastermind':
+                            if (stepIndex === 0) {
+                                message = "Analyzing security alert with severity: " + (formData.severity || "unknown");
+                                toolCalls = [
+                                    { tool: "siem.lookup", params: { alert_id: "ALERT-001" }, result: "ok" }
+                                ];
+                            } else {
+                                message = "Alert triage completed";
+                            }
+                            break;
+                        case 'cyberguard':
+                            const severity = formData.severity || "low";
+                            const requiresManual = severity === "high" || (formData.alert && formData.alert.includes("public_s3"));
+                            message = requiresManual ?
+                                "High severity alert requires manual review" :
+                                "Alert classified and prioritized";
+                            toolCalls = [
+                                { tool: "threatintel.query", params: { ip: "192.168.1.100" }, result: "warn" }
+                            ];
+                            break;
+                        case 'devassist':
+                            message = "Runbook executed for alert response";
+                            toolCalls = [
+                                { tool: "ticket.update", params: { ticket_id: "INC-12345", status: "in_progress" }, result: "ok" }
+                            ];
+                            break;
+                    }
+                    break;
+                case 'data':
+                    switch (agentKey) {
+                        case 'mastermind':
+                            if (stepIndex === 0) {
+                                message = "Processing dataset: " + (formData.dataset || "Unnamed dataset");
+                                toolCalls = [
+                                    { tool: "schema.registry.diff", params: { dataset: formData.dataset }, result: "ok" }
+                                ];
+                            } else {
+                                message = "Dataset validation completed";
+                            }
+                            break;
+                        case 'dataflow':
+                            const dataset = formData.dataset || "";
+                            const env = formData.environment || "staging";
+                            const hasSales = dataset.includes("sales");
+                            const hasPii = dataset.includes("pii");
+                            if (hasSales) {
+                                message = "Dataset contains sales data - late partition detected";
+                            } else if (hasPii && env === "production") {
+                                message = "PII detected in production dataset - privacy policy review required";
+                            } else {
+                                message = "Dataset quality checks passed";
+                            }
+                            toolCalls = [
+                                { tool: "dbt.test", params: { model: "sales_model" }, result: hasSales ? "warn" : "ok" }
+                            ];
+                            break;
+                        case 'cyberguard':
+                            const hasPiiData = (formData.dataset || "").includes("pii");
+                            const environment = formData.environment || "staging";
+                            message = hasPiiData && environment === "production" ?
+                                "PII policy validation required" :
+                                "Data privacy checks passed";
+                            toolCalls = [
+                                { tool: "siem.lookup", params: { query: "data_access", timeframe: "1h" }, result: "ok" }
+                            ];
+                            break;
+                    }
+                    break;
+                case 'it':
+                    switch (agentKey) {
+                        case 'mastermind':
+                            if (stepIndex === 0) {
+                                message = "Initiating onboarding for: " + (formData.name || "New Employee");
+                                toolCalls = [
+                                    { tool: "servicenow.fetch", params: { ticket_id: formData.ticket_id || "TICKET-001" }, result: "ok" }
+                                ];
+                            } else {
+                                message = "Onboarding process completed";
+                            }
+                            break;
+                        case 'devassist':
+                            const department = formData.department || "";
+                            const startDate = formData.start_date || "";
+                            const isToday = new Date(startDate).toDateString() === new Date().toDateString();
+                            const isWeekend = new Date(startDate).getDay() === 0 || new Date(startDate).getDay() === 6;
+                            if (isToday || isWeekend) {
+                                message = "Scheduling adjustment needed for start date";
+                            } else {
+                                message = "Onboarding plan generated successfully";
+                            }
+                            toolCalls = [
+                                { tool: "okta.create_user", params: { username: "john.smith" }, result: "ok" }
+                            ];
+                            break;
+                        case 'cyberguard':
+                            const dept = formData.department || "";
+                            message = dept === "Finance" ?
+                                "SOX compliance review required for Finance department" :
+                                "Access provisioning validated";
+                            toolCalls = [
+                                { tool: "okta.add_group", params: { user: "john.smith", group: "engineering" }, result: dept === "Finance" ? "warn" : "ok" }
+                            ];
+                            break;
+                    }
+                    break;
+            }
+            return { message, toolCalls };
+        }
+        // Add item to timeline with hover info
+        function addTimelineItem(agent, message, toolCalls) {
+            const timestamp = new Date().toLocaleTimeString();
+            const timelineItem = document.createElement('div');
+            timelineItem.className = 'timeline-item';
+            const avatar = document.createElement('div');
+            avatar.className = 'avatar';
+            avatar.style.backgroundColor = agent.color;
+            avatar.innerHTML = `<i class="${agent.icon}"></i>`;
+            const content = document.createElement('div');
+            content.className = 'bg-white p-4 rounded-lg shadow-sm';
+            const header = document.createElement('div');
+            header.className = 'flex justify-between items-start';
+            const agentInfo = document.createElement('div');
+            agentInfo.innerHTML = `
+                <div class="font-bold text-gray-800">${agent.name}</div>
+                <div class="text-xs text-gray-500">${timestamp}</div>
+            `;
+            header.appendChild(agentInfo);
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'mt-2 text-gray-700';
+            messageDiv.textContent = message;
+            content.appendChild(header);
+            content.appendChild(messageDiv);
+            // Add hover info tooltip
+            const hoverInfo = document.createElement('div');
+            hoverInfo.className = 'hover-info';
+            hoverInfo.innerHTML = `
+                <h4>${agent.name}</h4>
+                <div class="role">${agent.role}</div>
+                <p><strong>Current Action:</strong> ${getAgentActionDescription(agent, message)}</p>
+                <div class="function">
+                    <strong>Agent Function:</strong> ${getAgentFunctionDescription(agent, currentScenario)}
+                </div>
+            `;
+            timelineItem.appendChild(hoverInfo);
+            // Add tool calls if any
+            if (toolCalls && toolCalls.length > 0) {
+                const toolSection = document.createElement('div');
+                toolSection.className = 'mt-3';
+                const toolHeader = document.createElement('div');
+                toolHeader.className = 'flex items-center text-sm font-medium text-gray-600 cursor-pointer tool-header';
+                toolHeader.innerHTML = `
+                    <i class="fas fa-tools mr-2"></i>
+                    <span>Tool Calls (${toolCalls.length})</span>
+                    <i class="fas fa-chevron-down ml-auto transition-transform"></i>
+                `;
+                const toolContent = document.createElement('div');
+                toolContent.className = 'collapsible-content mt-2 space-y-2';
+                toolCalls.forEach(toolCall => {
+                    const toolDiv = document.createElement('div');
+                    toolDiv.className = 'tool-call p-3 rounded-lg';
+                    const toolResultClass = toolCall.result === 'ok' ? 'text-green-600' :
+                                          toolCall.result === 'warn' ? 'text-yellow-600' : 'text-red-600';
+                    toolDiv.innerHTML = `
+                        <div class="font-medium">${tools[toolCall.tool].name}</div>
+                        <div class="text-sm text-gray-600 mt-1">
+                            <span class="font-medium">Params:</span>
+                            <span class="font-mono text-xs">${JSON.stringify(toolCall.params)}</span>
+                        </div>
+                        <div class="mt-1">
+                            <span class="font-medium">Result:</span>
+                            <span class="${toolResultClass}">${toolCall.result.toUpperCase()}</span>
+                        </div>
+                    `;
+                    toolContent.appendChild(toolDiv);
+                });
+                toolSection.appendChild(toolHeader);
+                toolSection.appendChild(toolContent);
+                content.appendChild(toolSection);
+                // Add event listener for collapsible
+                toolHeader.addEventListener('click', function() {
+                    this.querySelector('i:last-child').classList.toggle('fa-chevron-down');
+                    this.querySelector('i:last-child').classList.toggle('fa-chevron-up');
+                    toolContent.classList.toggle('active');
+                });
+            }
+            timelineItem.appendChild(avatar);
+            timelineItem.appendChild(content);
+            agentTimeline.appendChild(timelineItem);
+            // Scroll to bottom
+            agentTimeline.scrollTop = agentTimeline.scrollHeight;
+        }
+        // Get agent action description based on message
+        function getAgentActionDescription(agent, message) {
+            const descriptions = {
+                "Starting orchestration": "Initiating the multi-agent workflow process",
+                "Evaluating release request": "Reviewing the release details and context",
+                "Analyzing request": "Processing the incoming task requirements",
+                "Analyzing security alert": "Examining the security event details",
+                "Processing dataset": "Validating the data pipeline information",
+                "Initiating onboarding": "Beginning the employee onboarding process",
+                "Finalizing release decision": "Making the final approval decision",
+                "Alert triage completed": "Finishing the security alert analysis",
+                "Dataset validation completed": "Completing data quality checks",
+                "Onboarding process completed": "Finishing employee setup process"
+            };
+            // Check for specific patterns
+            if (message.includes("Code review completed")) {
+                return "Performing code quality assessment and security scanning";
+            }
+            if (message.includes("Security risk detected")) {
+                return "Identifying potential security vulnerabilities in code";
+            }
+            if (message.includes("Manual approval required")) {
+                return "Flagging the task for human review due to policy requirements";
+            }
+            if (message.includes("Security checks passed")) {
+                return "Confirming no security issues were found";
+            }
+            if (message.includes("Production deployment requires")) {
+                return "Identifying additional validation needed for production";
+            }
+            if (message.includes("Alert classified and prioritized")) {
+                return "Categorizing and prioritizing the security alert";
+            }
+            if (message.includes("Runbook executed")) {
+                return "Executing automated response procedures";
+            }
+            if (message.includes("Dataset quality checks passed")) {
+                return "Verifying data integrity and schema compliance";
+            }
+            if (message.includes("Data privacy checks passed")) {
+                return "Ensuring data handling complies with privacy policies";
+            }
+            if (message.includes("Onboarding plan generated")) {
+                return "Creating customized setup plan for new employee";
+            }
+            if (message.includes("Access provisioning validated")) {
+                return "Confirming appropriate system access permissions";
+            }
+            // Default to predefined descriptions
+            for (const [key, desc] of Object.entries(descriptions)) {
+                if (message.includes(key)) {
+                    return desc;
+                }
+            }
+            return "Performing specialized analysis and evaluation";
+        }
+        // Get agent function description based on scenario
+        function getAgentFunctionDescription(agent, scenario) {
+            const functions = {
+                devops: {
+                    mastermind: "Coordinates the release process, evaluates code changes, and makes final deployment decisions",
+                    devassist: "Reviews code quality, performs static analysis, and identifies technical risks",
+                    cyberguard: "Checks for security vulnerabilities and ensures compliance with security policies",
+                    dataflow: "Validates data pipeline integrity and ensures proper environment deployment"
+                },
+                security: {
+                    mastermind: "Manages the security alert workflow and determines response actions",
+                    cyberguard: "Analyzes threat intelligence and classifies security events",
+                    devassist: "Executes automated security response procedures and updates tickets"
+                },
+                data: {
+                    mastermind: "Orchestrates data pipeline validation and publication process",
+                    dataflow: "Performs data quality checks and validates schema compliance",
+                    cyberguard: "Ensures data privacy policies are followed and access is controlled"
+                },
+                it: {
+                    mastermind: "Manages employee onboarding workflow and final access approvals",
+                    devassist: "Generates onboarding plans and validates system requirements",
+                    cyberguard: "Ensures appropriate access provisioning and compliance checks"
+                }
+            };
+            return functions[scenario][agent.name.toLowerCase()] || "Performing specialized analysis";
+        }
+        // Show final decision
+        function showFinalDecision() {
+            let decision = "";
+            let status = "";
+            let needsApproval = false;
+            switch (currentScenario) {
+                case 'devops':
+                    const hasSecurityRisk = formData.diff && (formData.diff.includes("eval(") || formData.diff.includes("raw user input"));
+                    const env = formData.environment || "staging";
+                    const dataFlowResult = env === "production" ? "amber" : "green";
+                    if (hasSecurityRisk) {
+                        decision = "Manual approval required due to security policy violations";
+                        status = "manual";
+                        needsApproval = true;
+                    } else if (dataFlowResult === "red") {
+                        decision = "Release blocked due to data validation failures";
+                        status = "blocked";
+                    } else {
+                        decision = "Release approved for deployment";
+                        status = "approved";
+                    }
+                    break;
+                case 'security':
+                    const severity = formData.severity || "low";
+                    const requiresManual = severity === "high" || (formData.alert && formData.alert.includes("public_s3"));
+                    if (requiresManual) {
+                        decision = "High severity alert requires manual triage";
+                        status = "manual";
+                        needsApproval = true;
+                    } else {
+                        decision = "Alert resolved automatically";
+                        status = "approved";
+                    }
+                    break;
+                case 'data':
+                    const dataset = formData.dataset || "";
+                    const environment = formData.environment || "staging";
+                    const hasSales = dataset.includes("sales");
+                    const hasPii = dataset.includes("pii");
+                    if (hasPii && environment === "production") {
+                        decision = "Manual approval required for PII data in production";
+                        status = "manual";
+                        needsApproval = true;
+                    } else if (hasSales) {
+                        decision = "Dataset published with late partition note";
+                        status = "approved";
+                    } else {
+                        decision = "Dataset published successfully";
+                        status = "approved";
+                    }
+                    break;
+                case 'it':
+                    const department = formData.department || "";
+                    if (department === "Finance") {
+                        decision = "Manual approval required for SOX compliance";
+                        status = "manual";
+                        needsApproval = true;
+                    } else {
+                        decision = "Onboarding completed successfully";
+                        status = "approved";
+                    }
+                    break;
+            }
+            // Create decision card
+            let statusClass = "";
+            let statusIcon = "";
+            switch (status) {
+                case "approved":
+                    statusClass = "status-approved";
+                    statusIcon = "fas fa-check-circle";
+                    break;
+                case "blocked":
+                    statusClass = "status-blocked";
+                    statusIcon = "fas fa-times-circle";
+                    break;
+                case "manual":
+                    statusClass = "status-manual";
+                    statusIcon = "fas fa-exclamation-circle";
+                    break;
+            }
+            decisionContent.innerHTML = `
+                <div class="decision-card p-6 ${statusClass}">
+                    <div class="flex items-center justify-center mb-4">
+                        <i class="${statusIcon} text-3xl mr-3"></i>
+                        <h3 class="text-2xl font-bold">${status.charAt(0).toUpperCase() + status.slice(1)}</h3>
+                    </div>
+                    <p class="text-lg mb-6">${decision}</p>
+                    ${needsApproval ? `
+                        <button id="approveButton" class="w-full btn btn-primary">
+                            <i class="fas fa-thumbs-up btn-icon"></i> Approve Anyway
+                        </button>
+                    ` : ''}
+                </div>
+            `;
+            decisionCard.classList.remove('hidden');
+            // Add event listener for approve button if present
+            if (needsApproval) {
+                document.getElementById('approveButton').addEventListener('click', function() {
+                    this.innerHTML = '<i class="fas fa-check mr-2"></i> Approved';
+                    this.classList.add('bg-green-500', 'hover:bg-green-600');
+                    this.classList.remove('bg-primary', 'hover:bg-blue-700');
+                    this.disabled = true;
+                    // Add audit log
+                    addTimelineItem(agents.mastermind, "Manual approval granted by user", [
+                        { tool: "audit.log", params: { action: "manual_approval", user: "admin" }, result: "ok" }
+                    ]);
+                });
+            }
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=molliexx99/maias" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>