Spaces:

S-Dreamer
/

playbook-execution

Running

App Files Files Community

S-Dreamer commited on 9 days ago

Commit

c99f4ff

verified ·

1 Parent(s): 89124db

Add 2 files

Browse files

Files changed (2) hide show

index.html +455 -670
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -3,752 +3,537 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SOAR Platform</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">
     <style>
-        .sidebar {
-            transition: all 0.3s ease;
         }
-        .sidebar.collapsed {
-            width: 70px;
         }
-        .sidebar.collapsed .sidebar-text {
-            display: none;
         }
-        .sidebar.collapsed .logo-text {
-            display: none;
         }
-        .sidebar.collapsed .nav-item {
-            justify-content: center;
         }
-        .main-content {
-            transition: all 0.3s ease;
         }
-        .main-content.expanded {
-            margin-left: 70px;
         }
-        .severity-critical {
-            background-color: #f87171;
         }
-        .severity-high {
-            background-color: #fca5a5;
         }
-        .severity-medium {
-            background-color: #fcd34d;
         }
-        .severity-low {
-            background-color: #86efac;
         }
-        .severity-info {
-            background-color: #93c5fd;
         }
-        .playbook-step {
-            border-left: 4px solid #3b82f6;
         }
-        .json-viewer {
-            font-family: monospace;
-            white-space: pre;
-            background-color: #f3f4f6;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            max-height: 300px;
-            overflow-y: auto;
         }
     </style>
 </head>
-<body class="bg-gray-100">
-    <div class="flex h-screen overflow-hidden">
-        <!-- Sidebar -->
-        <div id="sidebar" class="sidebar bg-gray-800 text-white w-64 flex flex-col">
-            <div class="p-4 flex items-center space-x-2 border-b border-gray-700">
-                <i class="fas fa-shield-alt text-blue-400 text-2xl"></i>
-                <span class="logo-text text-xl font-bold">SOAR Platform</span>
             </div>
-            <div class="flex-1 overflow-y-auto">
-                <nav class="p-4 space-y-2">
-                    <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-gray-700 bg-gray-700">
-                        <i class="fas fa-tachometer-alt"></i>
-                        <span class="sidebar-text">Dashboard</span>
-                    </a>
-                    <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-gray-700">
-                        <i class="fas fa-bolt"></i>
-                        <span class="sidebar-text">Trigger Events</span>
-                    </a>
-                    <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-gray-700">
-                        <i class="fas fa-book"></i>
-                        <span class="sidebar-text">Playbooks</span>
-                    </a>
-                    <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-gray-700">
-                        <i class="fas fa-history"></i>
-                        <span class="sidebar-text">Executions</span>
-                    </a>
-                    <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-gray-700">
-                        <i class="fas fa-cog"></i>
-                        <span class="sidebar-text">Settings</span>
-                    </a>
-                </nav>
-                <div class="p-4 border-t border-gray-700">
-                    <h3 class="sidebar-text text-xs uppercase font-semibold text-gray-400 mb-2">Quick Actions</h3>
-                    <div class="space-y-2">
-                        <button onclick="showCreatePlaybookModal()" class="w-full flex items-center space-x-3 p-2 rounded hover:bg-gray-700 text-sm">
-                            <i class="fas fa-plus"></i>
-                            <span class="sidebar-text">New Playbook</span>
-                        </button>
-                        <button onclick="showTriggerEventModal()" class="w-full flex items-center space-x-3 p-2 rounded hover:bg-gray-700 text-sm">
-                            <i class="fas fa-play"></i>
-                            <span class="sidebar-text">Trigger Event</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="p-4 border-t border-gray-700 flex items-center justify-between">
-                <div class="flex items-center space-x-3">
-                    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
-                        <span class="text-white font-bold">AD</span>
-                    </div>
-                    <div class="sidebar-text">
-                        <div class="font-medium">Admin User</div>
-                        <div class="text-xs text-gray-400">admin@soar.local</div>
-                    </div>
-                </div>
-                <button onclick="toggleSidebar()" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-chevron-left"></i>
                 </button>
             </div>
-        </div>
-        <!-- Main Content -->
-        <div id="main-content" class="main-content flex-1 overflow-auto">
-            <!-- Top Navigation -->
-            <header class="bg-white shadow-sm">
-                <div class="px-4 py-3 flex items-center justify-between">
-                    <div class="flex items-center space-x-4">
-                        <button onclick="toggleSidebar()" class="text-gray-600 hover:text-gray-900">
-                            <i class="fas fa-bars"></i>
-                        </button>
-                        <h1 class="text-xl font-semibold text-gray-800">Playbook Executions</h1>
-                    </div>
-                    <div class="flex items-center space-x-4">
-                        <div class="relative">
-                            <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                         </div>
-                        <button class="p-2 text-gray-600 hover:text-gray-900 relative">
-                            <i class="fas fa-bell"></i>
-                            <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
-                        </button>
                     </div>
-                </div>
-            </header>
-            <!-- Content -->
-            <main class="p-6">
-                <!-- Stats Cards -->
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p class="text-gray-500">Total Events</p>
-                                <h3 class="text-2xl font-bold">1,248</h3>
-                            </div>
-                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
-                                <i class="fas fa-bolt"></i>
                             </div>
                         </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p class="text-gray-500">Active Playbooks</p>
-                                <h3 class="text-2xl font-bold">42</h3>
-                            </div>
-                            <div class="p-3 rounded-full bg-green-100 text-green-600">
-                                <i class="fas fa-book"></i>
                             </div>
                         </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p class="text-gray-500">Today's Executions</p>
-                                <h3 class="text-2xl font-bold">87</h3>
-                            </div>
-                            <div class="p-3 rounded-full bg-purple-100 text-purple-600">
-                                <i class="fas fa-history"></i>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p class="text-gray-500">Avg Response Time</p>
-                                <h3 class="text-2xl font-bold">2.4s</h3>
                             </div>
-                            <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
-                                <i class="fas fa-stopwatch"></i>
                             </div>
                         </div>
                     </div>
                 </div>
-                <!-- Recent Executions -->
-                <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
-                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                        <h2 class="text-lg font-semibold text-gray-800">Recent Executions</h2>
-                        <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
-                    </div>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Execution ID</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Playbook</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trigger Event</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#EX-1001</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Credential Dumping Response</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EVT-2023-06-15-001</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.2s</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                        <button onclick="showExecutionDetails('EX-1001')" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
-                                        <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-redo"></i></button>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#EX-1000</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ransomware Detection</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EVT-2023-06-15-002</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Running</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12.7s</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                        <button onclick="showExecutionDetails('EX-1000')" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
-                                        <button class="text-red-600 hover:text-red-900"><i class="fas fa-stop"></i></button>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#EX-0999</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Phishing Response</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EVT-2023-06-14-005</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.1s</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                        <button onclick="showExecutionDetails('EX-0999')" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
-                                        <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-redo"></i></button>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#EX-0998</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Brute Force Protection</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EVT-2023-06-14-003</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Failed</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5s</td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                        <button onclick="showExecutionDetails('EX-0998')" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
-                                        <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-redo"></i></button>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-                <!-- Recent Events -->
-                <div class="bg-white rounded-lg shadow overflow-hidden">
-                    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                        <h2 class="text-lg font-semibold text-gray-800">Recent Security Events</h2>
-                        <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
                     </div>
-                    <div class="divide-y divide-gray-200">
-                        <div class="p-4 hover:bg-gray-50 cursor-pointer" onclick="showEventDetails('EVT-2023-06-15-001')">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 pt-1">
-                                    <div class="severity-high h-3 w-3 rounded-full"></div>
                                 </div>
-                                <div class="ml-3 flex-1">
-                                    <div class="flex items-center justify-between">
-                                        <p class="text-sm font-medium text-gray-900">Credential dumping detected</p>
-                                        <p class="text-sm text-gray-500">2 min ago</p>
-                                    </div>
-                                    <p class="text-sm text-gray-500">Host: WIN-SERVER-01 (192.168.1.100)</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="p-4 hover:bg-gray-50 cursor-pointer" onclick="showEventDetails('EVT-2023-06-15-002')">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 pt-1">
-                                    <div class="severity-critical h-3 w-3 rounded-full"></div>
                                 </div>
-                                <div class="ml-3 flex-1">
-                                    <div class="flex items-center justify-between">
-                                        <p class="text-sm font-medium text-gray-900">Ransomware activity detected</p>
-                                        <p class="text-sm text-gray-500">15 min ago</p>
-                                    </div>
-                                    <p class="text-sm text-gray-500">Host: WIN-WORKSTATION-42 (192.168.1.42)</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="p-4 hover:bg-gray-50 cursor-pointer" onclick="showEventDetails('EVT-2023-06-14-005')">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 pt-1">
-                                    <div class="severity-medium h-3 w-3 rounded-full"></div>
                                 </div>
-                                <div class="ml-3 flex-1">
-                                    <div class="flex items-center justify-between">
-                                        <p class="text-sm font-medium text-gray-900">Phishing email reported</p>
-                                        <p class="text-sm text-gray-500">3 hours ago</p>
-                                    </div>
-                                    <p class="text-sm text-gray-500">User: jsmith@domain.com</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="p-4 hover:bg-gray-50 cursor-pointer" onclick="showEventDetails('EVT-2023-06-14-003')">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 pt-1">
-                                    <div class="severity-high h-3 w-3 rounded-full"></div>
                                 </div>
-                                <div class="ml-3 flex-1">
-                                    <div class="flex items-center justify-between">
-                                        <p class="text-sm font-medium text-gray-900">Brute force attack detected</p>
-                                        <p class="text-sm text-gray-500">5 hours ago</p>
                                     </div>
-                                    <p class="text-sm text-gray-500">Source IP: 45.227.253.109</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </main>
-        </div>
-    </div>
-    <!-- Modals -->
-    <!-- Create Playbook Modal -->
-    <div id="create-playbook-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
-            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                <h3 class="text-lg font-semibold text-gray-800">Create New Playbook</h3>
-                <button onclick="hideModal('create-playbook-modal')" class="text-gray-400 hover:text-gray-500">
-                    <i class="fas fa-times"></i>
-                </button>
             </div>
-            <div class="p-6">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Playbook ID</label>
-                        <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g., credential-dumping-response">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Playbook Name</label>
-                        <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g., Credential Dumping Response">
-                    </div>
-                </div>
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                    <textarea class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Describe what this playbook does..."></textarea>
-                </div>
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Type</label>
-                    <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option>Log Event</option>
-                        <option>Alert</option>
-                        <option>API Call</option>
-                        <option>Schedule</option>
-                    </select>
-                </div>
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Condition (Jinja2 Template)</label>
-                    <textarea class="w-full font-mono text-sm border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="event.log.source == 'Security' and event.log.event_id == 4688">event.log.source == 'Security' and 'sekurlsa::logonpasswords' in event.log.message</textarea>
-                </div>
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">credential-access</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">t1003</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">windows</span>
-                        <button class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                            <i class="fas fa-plus mr-1"></i> Add Tag
-                        </button>
-                    </div>
-                </div>
-                <div class="mb-6">
-                    <div class="flex justify-between items-center mb-2">
-                        <label class="block text-sm font-medium text-gray-700">Steps</label>
-                        <button onclick="addPlaybookStep()" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
-                            <i class="fas fa-plus mr-1"></i> Add Step
-                        </button>
                     </div>
-                    <div id="playbook-steps" class="space-y-4">
-                        <div class="playbook-step p-4 bg-gray-50 rounded-lg">
-                            <div class="flex justify-between items-start mb-2">
-                                <div class="w-full">
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
-                                    <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                                        <option>Notify</option>
-                                        <option>EDR Isolate</option>
-                                        <option>Create Ticket</option>
-                                        <option>Run Script</option>
-                                        <option>Block IP</option>
-                                    </select>
                                 </div>
-                                <button class="ml-2 text-red-500 hover:text-red-700 mt-7">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                            <div class="mb-2">
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
-                                <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Step name">
                             </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (YAML)</label>
-                                <textarea class="w-full font-mono text-sm border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="channel: 'soc_teams'
-message: 'Credential dumping detected on {{ event.host }}'">channel: 'soc_teams'
-message: 'Credential dumping detected on {{ event.host }}'</textarea>
                             </div>
-                        </div>
-                        <div class="playbook-step p-4 bg-gray-50 rounded-lg">
-                            <div class="flex justify-between items-start mb-2">
-                                <div class="w-full">
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
-                                    <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                                        <option>Notify</option>
-                                        <option selected>EDR Isolate</option>
-                                        <option>Create Ticket</option>
-                                        <option>Run Script</option>
-                                        <option>Block IP</option>
-                                    </select>
                                 </div>
-                                <button class="ml-2 text-red-500 hover:text-red-700 mt-7">
-                                    <i class="fas fa-trash"></i>
-                                </button>
                             </div>
-                            <div class="mb-2">
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
-                                <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Step name" value="Isolate Host">
                             </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (YAML)</label>
-                                <textarea class="w-full font-mono text-sm border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4">host_id: '{{ event.host_id }}'
-reason: 'Credential dumping detected'</textarea>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
-                <button onclick="hideModal('create-playbook-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
-                <button class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700">Create Playbook</button>
-            </div>
-        </div>
-    </div>
-    <!-- Trigger Event Modal -->
-    <div id="trigger-event-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl">
-            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                <h3 class="text-lg font-semibold text-gray-800">Trigger New Event</h3>
-                <button onclick="hideModal('trigger-event-modal')" class="text-gray-400 hover:text-gray-500">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="p-6">
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Playbook</label>
-                    <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option>Credential Dumping Response</option>
-                        <option>Ransomware Detection</option>
-                        <option>Phishing Response</option>
-                        <option>Brute Force Protection</option>
-                    </select>
-                </div>
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Event Data (JSON)</label>
-                    <div class="json-viewer" id="event-data-preview">{
-  "event_id": "EVT-2023-06-15-001",
-  "host": "WIN-SERVER-01",
-  "host_id": "host_12345",
-  "source_ip": "192.168.1.100",
-  "log": {
-    "source": "Security",
-    "event_id": 4688,
-    "message": "sekurlsa::logonpasswords detected",
-    "timestamp": "2023-06-15T10:30:00Z"
-  },
-  "severity": "high"
-}</div>
-                </div>
-                <div class="flex items-center">
-                    <input type="checkbox" id="use-sample-data" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                    <label for="use-sample-data" class="ml-2 block text-sm text-gray-700">Use sample event data</label>
-                </div>
-            </div>
-            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
-                <button onclick="hideModal('trigger-event-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
-                <button class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700">Trigger Event</button>
-            </div>
-        </div>
-    </div>
-    <!-- Execution Details Modal -->
-    <div id="execution-details-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
-            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                <h3 class="text-lg font-semibold text-gray-800">Execution Details - #EX-1001</h3>
-                <button onclick="hideModal('execution-details-modal')" class="text-gray-400 hover:text-gray-500">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="p-6">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Playbook</h4>
-                        <p class="text-base font-medium text-gray-900">Credential Dumping Response</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Status</h4>
-                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Trigger Event</h4>
-                        <p class="text-base font-medium text-gray-900">EVT-2023-06-15-001</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Duration</h4>
-                        <p class="text-base font-medium text-gray-900">4.2 seconds</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Started At</h4>
-                        <p class="text-base font-medium text-gray-900">2023-06-15 10:30:05 UTC</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Completed At</h4>
-                        <p class="text-base font-medium text-gray-900">2023-06-15 10:30:09 UTC</p>
                     </div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-500 mb-2">Trigger Event Data</h4>
-                    <div class="json-viewer">{
-  "event_id": "EVT-2023-06-15-001",
-  "host": "WIN-SERVER-01",
-  "host_id": "host_12345",
-  "source_ip": "192.168.1.100",
-  "log": {
-    "source": "Security",
-    "event_id": 4688,
-    "message": "sekurlsa::logonpasswords detected",
-    "timestamp": "2023-06-15T10:30:00Z"
-  },
-  "severity": "high"
-}</div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-500 mb-2">Execution Steps</h4>
-                    <div class="space-y-3">
-                        <div class="p-3 bg-green-50 rounded-lg border border-green-100">
-                            <div class="flex items-center justify-between mb-1">
-                                <div class="font-medium text-green-800">1. Alert Analyst</div>
-                                <div class="text-xs text-green-600">Success (1.2s)</div>
                             </div>
-                            <div class="text-sm text-green-700">Notified SOC team via Teams channel</div>
-                        </div>
-                        <div class="p-3 bg-green-50 rounded-lg border border-green-100">
-                            <div class="flex items-center justify-between mb-1">
-                                <div class="font-medium text-green-800">2. Isolate Host</div>
-                                <div class="text-xs text-green-600">Success (2.1s)</div>
                             </div>
-                            <div class="text-sm text-green-700">Isolated host WIN-SERVER-01 via EDR</div>
-                        </div>
-                        <div class="p-3 bg-green-50 rounded-lg border border-green-100">
-                            <div class="flex items-center justify-between mb-1">
-                                <div class="font-medium text-green-800">3. Create Ticket</div>
-                                <div class="text-xs text-green-600">Success (0.9s)</div>
                             </div>
-                            <div class="text-sm text-green-700">Created ticket #INC-12345 in ServiceNow</div>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
-                <button onclick="hideModal('execution-details-modal')" class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700">Close</button>
-            </div>
-        </div>
-    </div>
-    <!-- Event Details Modal -->
-    <div id="event-details-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
-            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-                <h3 class="text-lg font-semibold text-gray-800">Event Details - EVT-2023-06-15-001</h3>
-                <button onclick="hideModal('event-details-modal')" class="text-gray-400 hover:text-gray-500">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="p-6">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Event ID</h4>
-                        <p class="text-base font-medium text-gray-900">EVT-2023-06-15-001</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Severity</h4>
-                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High</span>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Host</h4>
-                        <p class="text-base font-medium text-gray-900">WIN-SERVER-01 (host_12345)</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Source IP</h4>
-                        <p class="text-base font-medium text-gray-900">192.168.1.100</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Timestamp</h4>
-                        <p class="text-base font-medium text-gray-900">2023-06-15 10:30:00 UTC</p>
-                    </div>
-                    <div>
-                        <h4 class="text-sm font-medium text-gray-500 mb-2">Related Executions</h4>
-                        <p class="text-base font-medium text-gray-900">1 execution</p>
-                    </div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-500 mb-2">Event Data</h4>
-                    <div class="json-viewer">{
-  "event_id": "EVT-2023-06-15-001",
-  "host": "WIN-SERVER-01",
-  "host_id": "host_12345",
-  "source_ip": "192.168.1.100",
-  "log": {
-    "source": "Security",
-    "event_id": 4688,
-    "message": "sekurlsa::logonpasswords detected",
-    "timestamp": "2023-06-15T10:30:00Z"
-  },
-  "severity": "high"
-}</div>
-                </div>
-                <div class="mb-6">
-                    <h4 class="text-sm font-medium text-gray-500 mb-2">Triggered Playbooks</h4>
-                    <div class="space-y-3">
-                        <div class="p-3 bg-blue-50 rounded-lg border border-blue-100">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <div class="font-medium text-blue-800">Credential Dumping Response</div>
-                                    <div class="text-sm text-blue-700">Automated response to credential dumping activity</div>
-                                </div>
-                                <button class="px-3 py-1 bg-blue-600 rounded-lg text-white text-sm hover:bg-blue-700">View Execution</button>
                             </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
-                <button onclick="hideModal('event-details-modal')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Close</button>
-                <button class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700">Create Playbook</button>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Toggle sidebar
-        function toggleSidebar() {
-            const sidebar = document.getElementById('sidebar');
-            const mainContent = document.getElementById('main-content');
-            sidebar.classList.toggle('collapsed');
-            mainContent.classList.toggle('expanded');
-            // Change the chevron icon direction
-            const toggleBtn = sidebar.querySelector('button');
-            const icon = toggleBtn.querySelector('i');
-            if (sidebar.classList.contains('collapsed')) {
-                icon.classList.remove('fa-chevron-left');
-                icon.classList.add('fa-chevron-right');
-            } else {
-                icon.classList.remove('fa-chevron-right');
-                icon.classList.add('fa-chevron-left');
-            }
-        }
-        // Modal functions
-        function showCreatePlaybookModal() {
-            document.getElementById('create-playbook-modal').classList.remove('hidden');
-        }
-        function showTriggerEventModal() {
-            document.getElementById('trigger-event-modal').classList.remove('hidden');
-        }
-        function showExecutionDetails(id) {
-            // In a real app, we would fetch the execution details based on the ID
-            document.getElementById('execution-details-modal').classList.remove('hidden');
-        }
-        function showEventDetails(id) {
-            // In a real app, we would fetch the event details based on the ID
-            document.getElementById('event-details-modal').classList.remove('hidden');
-        }
-        function hideModal(modalId) {
-            document.getElementById(modalId).classList.add('hidden');
-        }
-        // Add playbook step
-        function addPlaybookStep() {
-            const stepsContainer = document.getElementById('playbook-steps');
-            const stepDiv = document.createElement('div');
-            stepDiv.className = 'playbook-step p-4 bg-gray-50 rounded-lg';
-            stepDiv.innerHTML = `
-                <div class="flex justify-between items-start mb-2">
-                    <div class="w-full">
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
-                        <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <option>Notify</option>
-                            <option>EDR Isolate</option>
-                            <option>Create Ticket</option>
-                            <option>Run Script</option>
-                            <option>Block IP</option>
-                        </select>
-                    </div>
-                    <button onclick="this.parentNode.parentNode.parentNode.remove()" class="ml-2 text-red-500 hover:text-red-700 mt-7">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-                <div class="mb-2">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
-                    <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Step name">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (YAML)</label>
-                    <textarea class="w-full font-mono text-sm border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="key: value"></textarea>
-                </div>
-            `;
-            stepsContainer.appendChild(stepDiv);
-        }
-        // Close modals when clicking outside
-        window.addEventListener('click', function(event) {
-            if (event.target.classList.contains('fixed')) {
-                event.target.classList.add('hidden');
-            }
-        });
-    </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=S-Dreamer/playbook-execution" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SOAR Engine Interactive Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        body { font-family: 'Inter', sans-serif; }
+        .tab-active {
+            border-bottom-color: #3b82f6;
+            color: #3b82f6;
+            font-weight: 600;
         }
+        .chart-container {
+            position: relative;
+            width: 100%;
+            height: 300px;
         }
+        .code-block {
+            background-color: #1f2937;
+            color: #d1d5db;
+            border-radius: 0.375rem;
         }
+        .arrow {
+            position: relative;
+            width: 2px;
+            background-color: #6b7280;
+            margin: 1rem auto;
+            height: 40px;
         }
+        .arrow::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-top: 8px solid #6b7280;
         }
+        .step-interactive {
+            transition: all 0.2s ease-in-out;
+            cursor: pointer;
         }
+        .step-interactive:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         }
+        .step-selected {
+            border-color: #3b82f6 !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+            transform: translateY(-2px);
         }
+        .tech-card {
+            transition: all 0.2s ease;
         }
+        .tech-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
+        .model-card {
+            transition: all 0.2s ease;
         }
+        .model-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         }
+        .copy-btn {
+            transition: all 0.2s ease;
         }
+        .copy-btn:hover {
+            background-color: #4b5563;
+        }
+        .copy-btn.copied {
+            background-color: #10b981;
+        }
+        .details-pane {
+            min-height: 400px;
+        }
+        @media (max-width: 1023px) {
+            .workflow-container {
+                flex-direction: column;
+            }
+            .workflow-steps {
+                width: 100%;
+                margin-bottom: 2rem;
+            }
+            .details-pane {
+                width: 100%;
+            }
         }
     </style>
 </head>
+<body class="bg-gray-50 text-gray-800">
+    <div class="container mx-auto p-4 md:p-8 max-w-7xl">
+        <header class="text-center mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-900">SOAR Engine Dashboard</h1>
+            <p class="mt-2 text-lg text-gray-600">Interactive Security Orchestration, Automation & Response Platform</p>
+            <div class="mt-4 flex justify-center space-x-2">
+                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Real-time</span>
+                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Automated</span>
+                <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">Scalable</span>
             </div>
+        </header>
+        <nav class="flex overflow-x-auto pb-2 mb-8 scrollbar-hide">
+            <div class="flex space-x-1 border-b border-gray-300 mx-auto">
+                <button data-tab="overview" class="tab-button py-3 px-4 md:px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500 tab-active whitespace-nowrap">
+                    <i class="fas fa-home mr-2"></i>Overview
+                </button>
+                <button data-tab="models" class="tab-button py-3 px-4 md:px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500 whitespace-nowrap">
+                    <i class="fas fa-database mr-2"></i>Data Models
+                </button>
+                <button data-tab="workflow" class="tab-button py-3 px-4 md:px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500 whitespace-nowrap">
+                    <i class="fas fa-project-diagram mr-2"></i>Workflow
+                </button>
+                <button data-tab="api" class="tab-button py-3 px-4 md:px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500 whitespace-nowrap">
+                    <i class="fas fa-code mr-2"></i>API Endpoints
                 </button>
             </div>
+        </nav>
+        <main>
+            <div id="overview" class="tab-content">
+                <div class="bg-white p-6 md:p-8 rounded-xl shadow-md">
+                    <div class="flex items-center justify-between mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">System Overview</h2>
+                        <div class="flex items-center space-x-2">
+                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">v2.4.1</span>
+                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Active</span>
                         </div>
                     </div>
+                    <p class="text-gray-600 mb-8">The SOAR Engine automates security response workflows by processing trigger events and executing predefined playbooks. Built on a modern tech stack, it provides reliable, scalable security automation with minimal human intervention.</p>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                        <div class="tech-card bg-gray-100 p-6 rounded-lg border border-gray-200 hover:border-blue-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-bolt text-blue-600"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-700">FastAPI</h3>
                             </div>
+                            <p class="text-gray-600">High-performance API layer for event ingestion and playbook management with automatic OpenAPI documentation.</p>
                         </div>
+                        <div class="tech-card bg-gray-100 p-6 rounded-lg border border-gray-200 hover:border-green-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-database text-green-600"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-700">SQLAlchemy</h3>
                             </div>
+                            <p class="text-gray-600">ORM for database schema management, supporting PostgreSQL, MySQL, and SQLite with advanced query capabilities.</p>
                         </div>
+                        <div class="tech-card bg-gray-100 p-6 rounded-lg border border-gray-200 hover:border-purple-200">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-file-code text-purple-600"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-700">Jinja2</h3>
                             </div>
+                            <p class="text-gray-600">Templating engine for dynamic playbook execution, enabling context-aware automation with event data.</p>
                         </div>
                     </div>
+                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                        <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Playbook Analytics</h3>
+                        <p class="text-gray-600 mb-6 text-center">Quantitative breakdown of playbook components showing the structure of automated workflows.</p>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                            <div class="chart-container">
+                                <canvas id="playbookChart"></canvas>
                             </div>
+                            <div>
+                                <div class="space-y-4">
+                                    <div class="flex items-center">
+                                        <div class="w-4 h-4 bg-yellow-400 rounded-full mr-3"></div>
+                                        <div>
+                                            <h4 class="font-medium text-gray-700">Triggers</h4>
+                                            <p class="text-sm text-gray-500">Events that initiate playbook execution</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <div class="w-4 h-4 bg-gray-300 rounded-full mr-3"></div>
+                                        <div>
+                                            <h4 class="font-medium text-gray-700">Conditions</h4>
+                                            <p class="text-sm text-gray-500">Logic gates for workflow branching</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <div class="w-4 h-4 bg-indigo-500 rounded-full mr-3"></div>
+                                        <div>
+                                            <h4 class="font-medium text-gray-700">Action Steps</h4>
+                                            <p class="text-sm text-gray-500">Individual automated tasks</p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
+            <div id="models" class="tab-content hidden">
+                <div class="bg-white p-6 md:p-8 rounded-xl shadow-md">
+                    <div class="flex items-center justify-between mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Database Schema</h2>
+                        <div class="flex items-center space-x-2">
+                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Normalized</span>
+                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Relational</span>
+                        </div>
                     </div>
+                    <p class="text-gray-600 mb-8 text-center">The database schema is designed for efficient storage and retrieval of security events, playbooks, and execution logs with clear relationships between entities.</p>
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                        <div class="model-card border border-blue-200 rounded-lg p-6 bg-blue-50/50">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-bell text-blue-600"></i>
                                 </div>
+                                <h3 class="text-xl font-semibold text-blue-700">TriggerEvent</h3>
+                            </div>
+                            <p class="text-sm text-blue-600 mb-4">Incoming security alerts that initiate automated responses</p>
+                            <div class="space-y-2 text-gray-700">
+                                <div class="flex items-start">
+                                    <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-mono mr-2">PK</div>
+                                    <div><strong>id:</strong> <span class="text-gray-600">Integer</span></div>
                                 </div>
+                                <div><strong>event_id:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>host:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>host_id:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>source_ip:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>log:</strong> <span class="text-gray-600">JSON</span></div>
+                                <div><strong>severity:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>timestamp:</strong> <span class="text-gray-600">DateTime</span></div>
                             </div>
                         </div>
+                        <div class="model-card border border-green-200 rounded-lg p-6 bg-green-50/50">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-book text-green-600"></i>
                                 </div>
+                                <h3 class="text-xl font-semibold text-green-700">Playbook</h3>
+                            </div>
+                            <p class="text-sm text-green-600 mb-4">Automated response workflows with conditional logic</p>
+                            <div class="space-y-2 text-gray-700">
+                                <div class="flex items-start">
+                                    <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-mono mr-2">PK</div>
+                                    <div><strong>id:</strong> <span class="text-gray-600">String</span></div>
                                 </div>
+                                <div><strong>name:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>description:</strong> <span class="text-gray-600">Text</span></div>
+                                <div><strong>tags:</strong> <span class="text-gray-600">JSON</span></div>
+                                <div><strong>trigger_type:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>trigger_condition:</strong> <span class="text-gray-600">Text</span></div>
+                                <div><strong>steps:</strong> <span class="text-gray-600">JSON</span></div>
                             </div>
                         </div>
+                        <div class="model-card border border-purple-200 rounded-lg p-6 bg-purple-50/50">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-history text-purple-600"></i>
                                 </div>
+                                <h3 class="text-xl font-semibold text-purple-700">PlaybookExecution</h3>
+                            </div>
+                            <p class="text-sm text-purple-600 mb-4">Audit log of playbook runs with status and timing</p>
+                            <div class="space-y-2 text-gray-700">
+                                <div class="flex items-start">
+                                    <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-mono mr-2">PK</div>
+                                    <div><strong>id:</strong> <span class="text-gray-600">Integer</span></div>
+                                </div>
+                                <div class="flex items-start">
+                                    <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-mono mr-2">FK</div>
+                                    <div><strong>playbook_id:</strong> <span class="text-gray-600">String → Playbook</span></div>
                                 </div>
+                                <div class="flex items-start">
+                                    <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-mono mr-2">FK</div>
+                                    <div><strong>trigger_event_id:</strong> <span class="text-gray-600">Integer → TriggerEvent</span></div>
+                                </div>
+                                <div><strong>status:</strong> <span class="text-gray-600">String</span></div>
+                                <div><strong>started_at:</strong> <span class="text-gray-600">DateTime</span></div>
+                                <div><strong>completed_at:</strong> <span class="text-gray-600">DateTime</span></div>
                             </div>
                         </div>
+                    </div>
+                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                        <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Entity Relationships</h3>
+                        <div class="flex flex-col items-center">
+                            <div class="w-full max-w-md">
+                                <div class="flex justify-between items-center mb-4">
+                                    <div class="text-center">
+                                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                                            <i class="fas fa-bell text-blue-600 text-xl"></i>
+                                        </div>
+                                        <span class="text-sm font-medium text-blue-700">TriggerEvent</span>
+                                    </div>
+                                    <div class="text-center">
+                                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                                            <i class="fas fa-book text-green-600 text-xl"></i>
+                                        </div>
+                                        <span class="text-sm font-medium text-green-700">Playbook</span>
+                                    </div>
+                                    <div class="text-center">
+                                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                                            <i class="fas fa-history text-purple-600 text-xl"></i>
+                                        </div>
+                                        <span class="text-sm font-medium text-purple-700">Execution</span>
+                                    </div>
                                 </div>
+                                <div class="relative h-2 bg-gray-200 rounded-full overflow-hidden">
+                                    <div class="absolute inset-0 flex">
+                                        <div class="h-full bg-blue-200" style="width: 33%"></div>
+                                        <div class="h-full bg-green-200" style="width: 34%"></div>
+                                        <div class="h-full bg-purple-200" style="width: 33%"></div>
                                     </div>
+                                </div>
+                                <div class="mt-4 text-center text-sm text-gray-600">
+                                    One-to-many relationships between entities with foreign key constraints
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <div id="workflow" class="tab-content hidden">
+                <div class="bg-white p-6 md:p-8 rounded-xl shadow-md">
+                    <div class="flex items-center justify-between mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Playbook Execution Flow</h2>
+                        <div class="flex items-center space-x-2">
+                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Interactive</span>
+                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">Dynamic</span>
+                        </div>
                     </div>
+                    <p class="text-gray-600 mb-8 text-center">Explore how security events trigger automated responses through our visual workflow. Click on any step to see how event data transforms into actionable parameters.</p>
+                    <div class="workflow-container flex flex-col lg:flex-row gap-6">
+                        <div class="workflow-steps lg:w-2/5">
+                            <div id="trigger-event-box" class="step-interactive border-2 border-dashed border-yellow-400 bg-yellow-50 rounded-lg p-4 mb-4">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
+                                        <span class="text-yellow-600 font-bold">1</span>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-yellow-800">Trigger Event</h4>
+                                        <p class="text-sm text-yellow-700">Credential Dumping Detected</p>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="arrow"></div>
+                            <div id="condition-check-box" class="step-interactive border-2 border-gray-300 bg-gray-100 rounded-lg p-4 mb-4">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
+                                        <span class="text-gray-600 font-bold">2</span>
+                                    </div>
+                                    <div>
+                                        <h4 class="font-bold text-gray-800">Condition Check</h4>
+                                        <p class="text-sm text-gray-600">Security event validation</p>
+                                    </div>
+                                </div>
                             </div>
+                            <div class="arrow"></div>
+                            <div class="bg-white p-4 rounded-lg border border-gray-200">
+                                <h4 class="font-bold text-gray-700 mb-3">Automated Actions</h4>
+                                <div id="action-step-1" class="step-interactive border-2 border-transparent bg-blue-100 rounded-lg p-4 mb-3">
+                                    <div class="flex items-center">
+                                        <div class="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center mr-3">
+                                            <span class="text-blue-700 font-bold">A</span>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-blue-800">Notify Analyst</h4>
+                                            <p class="text-sm text-blue-700">SOC team alert</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="action-step-2" class="step-interactive border-2 border-transparent bg-red-100 rounded-lg p-4 mb-3">
+                                    <div class="flex items-center">
+                                        <div class="w-8 h-8 bg-red-200 rounded-full flex items-center justify-center mr-3">
+                                            <span class="text-red-700 font-bold">B</span>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-red-800">Isolate Host</h4>
+                                            <p class="text-sm text-red-700">Contain threat</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="action-step-3" class="step-interactive border-2 border-transparent bg-purple-100 rounded-lg p-4">
+                                    <div class="flex items-center">
+                                        <div class="w-8 h-8 bg-purple-200 rounded-full flex items-center justify-center mr-3">
+                                            <span class="text-purple-700 font-bold">C</span>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-bold text-purple-800">Create Ticket</h4>
+                                            <p class="text-sm text-purple-700">Incident tracking</p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
+                        </div>
+                        <div class="details-pane lg:w-3/5 bg-gray-800 rounded-lg p-6">
+                            <div id="details-initial" class="text-gray-400 text-center flex flex-col justify-center h-full">
+                                <i class="fas fa-mouse-pointer text-4xl mb-4 opacity-50"></i>
+                                <p class="text-lg font-medium">Select a step from the workflow</p>
+                                <p class="text-sm mt-2 opacity-70">to see detailed parameter transformation</p>
                             </div>
+                            <div id="details-content" class="hidden">
+                                <div class="flex items-center justify-between mb-4">
+                                    <h3 id="details-title" class="text-xl font-bold text-white"></h3>
+                                    <div id="step-badge" class="px-2 py-1 rounded-full text-xs font-medium"></div>
+                                </div>
+                                <div class="mb-6">
+                                    <h4 class="text-md font-semibold text-gray-300 mb-2 flex items-center">
+                                        <i class="fas fa-file-alt mr-2"></i>Original Parameters
+                                    </h4>
+                                    <div class="relative">
+                                        <pre id="details-params" class="code-block p-4 rounded-md text-sm overflow-x-auto"></pre>
+                                        <button onclick="copyDetails('details-params')" class="copy-btn absolute top-2 right-2 bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded flex items-center">
+                                            <i class="fas fa-copy mr-1"></i> Copy
+                                        </button>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h4 class="text-md font-semibold text-gray-300 mb-2 flex items-center">
+                                        <i class="fas fa-magic mr-2"></i>Rendered Parameters
+                                    </h4>
+                                    <div class="relative">
+                                        <pre id="details-rendered" class="code-block bg-green-900/50 border border-green-500 p-4 rounded-md text-sm overflow-x-auto"></pre>
+                                        <button onclick="copyDetails('details-rendered')" class="copy-btn absolute top-2 right-2 bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded flex items-center">
+                                            <i class="fas fa-copy mr-1"></i> Copy
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <div id="api" class="tab-content hidden">
+                <div class="bg-white p-6 md:p-8 rounded-xl shadow-md">
+                    <div class="flex items-center justify-between mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">API Endpoints</h2>
+                        <div class="flex items-center space-x-2">
+                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">RESTful</span>
+                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">OpenAPI</span>
+                        </div>
                     </div>
+                    <p class="text-gray-600 mb-8 text-center">The SOAR Engine exposes a clean REST API for integration with security tools and custom applications. All endpoints support JSON payloads and include comprehensive documentation.</p>
+                    <div class="space-y-8">
+                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-md text-sm font-mono mr-4">POST</div>
+                                <h3 class="text-xl font-semibold">/load_playbook/</h3>
                             </div>
+                            <p class="text-gray-600 mb-4">Registers a new playbook or updates an existing one. The YAML definition includes triggers, conditions, and action steps for automated security responses.</p>
+                            <div class="mb-4">
+                                <h4 class="text-md font-semibold text-gray-700 mb-2">Request Headers:</h4>
+                                <div class="bg-gray-100 p-3 rounded-md font-mono text-sm">
+                                    Content-Type: application/yaml<br>
+                                    X-API-Key: your_api_key_here
+                                </div>
                             </div>
+                            <h4 class="text-md font-semibold text-gray-700 mb-2">Example Request:</h4>
+                            <div class="relative">
+                                <pre id="api-load-body" class="code-block p-4 rounded-md text-sm overflow-x-auto">id: credential-dumping-response
+name: Credential Dumping Response
+description: Automated response to Mimikatz activity
+tags:
+  - credential-access
+  - t1003
+  - windows
+trigger_type: log_event
+trigger_condition: |
+  event.log.source == 'Security' and
+  'sekurlsa::logonpasswords' in event.log.message
+steps:
+  - name: Alert Analyst
+    action: notify
+    params:
+      channel: soc_teams
+      message: "Credential dumping detected on {{ event.host }}"
+  - name: Isolate Host
+    action: edr_isolate
+    params:
+      host_id: "{{ event.host_id }}"
+      reason: "Credential dumping detected"
+  - name: Create Ticket
+    action: create_ticket
+    params:
+      summary: "Security Incident - {{ event.host }}"
+      severity: "{{ event.severity | default('high') }}"</pre>
+                                <button onclick="copyToClipboard('api-load-body')" class="copy-btn absolute top-2 right-2 bg-gray-600 hover:bg-gray-500 text-white text-xs font-semibold py-1 px-2 rounded flex items-center">
+                                    <i class="fas fa-copy mr-1"></i> Copy
+                                </button>
                             </div>
                         </div>
+                        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-green-100 text-green-800 px-3 py-1 rounded-md text-sm font-mono mr-4">POST</div>
+                                <h3 class="text-xl font-semibold">/trigger_event/</h3>
                             </div>
+                            <p class="text-gray-600 mb-4">Submits a security event that will trigger matching playbooks. The event data is used to populate template variables in playbook actions.</p>
+                            <div class="mb-4">
+                                <h4 class="text-md font-sem
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@

+ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SOAR Engine Interactive Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">  <style> body { font-family: 'Inter', sans-serif; } .tab-active { border-bottom-color: #3b82f6; color: #3b82f6; } .chart-container { position: relative; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; height: 300px; max-height: 350px; } .code-block { background-color: #1f2937; color: #d1d5db; } .arrow { position: relative; width: 2px; background-color: #6b7280; margin: 1rem auto; } .arrow::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #6b7280; } .step-interactive { transition: all 0.2s ease-in-out; } .step-interactive:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .step-selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); } </style> </head> <body class="bg-gray-50 text-gray-800"> <div class="container mx-auto p-4 md:p-8"> <header class="text-center mb-8"> <h1 class="text-4xl font-bold text-gray-900">SOAR Engine Architecture</h1> <p class="mt-2 text-lg text-gray-600">An interactive guide to the Security Orchestration, Automation, and Response platform.</p> </header> <nav class="flex justify-center border-b border-gray-300 mb-8"> <button data-tab="overview" class="tab-button py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500 tab-active">Overview</button> <button data-tab="models" class="tab-button py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500">Data Models</button> <button data-tab="workflow" class="tab-button py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500">Interactive Workflow</button> <button data-tab="api" class="tab-button py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium text-gray-500">API Endpoints</button> </nav> <main> <div id="overview" class="tab-content"> <div class="bg-white p-8 rounded-xl shadow-md"> <h2 class="text-2xl font-bold text-gray-800 mb-4">System Overview</h2> <p class="text-gray-600 mb-6">This application provides an interactive exploration of a Python-based SOAR engine. The engine is designed to automate security response workflows by ingesting trigger events and executing predefined playbooks. It is built on a modern, robust tech stack to ensure reliability and scalability.</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center"> <div class="bg-gray-100 p-6 rounded-lg"> <h3 class="text-lg font-semibold text-gray-700">FastAPI</h3> <p class="text-gray-600 mt-2">Provides the high-performance API layer for ingesting events and managing playbooks.</p> </div> <div class="bg-gray-100 p-6 rounded-lg"> <h3 class="text-lg font-semibold text-gray-700">SQLAlchemy</h3> <p class="text-gray-600 mt-2">Manages the database schema and interactions, persisting all events, playbooks, and execution logs.</p> </div> <div class="bg-gray-100 p-6 rounded-lg"> <h3 class="text-lg font-semibold text-gray-700">Jinja2</h3> <p class="text-gray-600 mt-2">Powers the dynamic playbook execution, allowing actions to be customized with data from the trigger event.</p> </div> </div> <div class="mt-8"> <h3 class="text-xl font-bold text-gray-800 mb-4 text-center">Sample Playbook Composition</h3> <p class="text-gray-600 mb-4 text-center">This chart breaks down the components of the sample playbook used in the interactive demo. It gives a quick quantitative sense of a typical playbook's structure.</p> <div class="chart-container"> <canvas id="playbookChart"></canvas> </div> </div> </div> </div> <div id="models" class="tab-content hidden"> <div class="bg-white p-8 rounded-xl shadow-md"> <h2 class="text-2xl font-bold text-gray-800 mb-2">Database Schema</h2> <p class="text-gray-600 mb-6 text-center">The database is the core of the SOAR engine, storing the state of all operations. Below is a visual representation of the three main tables and their relationships. This structure allows us to track incoming security events, the playbooks designed to respond to them, and a detailed log of every execution.</p> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="border border-gray-200 rounded-lg p-6 bg-gray-50"> <h3 class="text-xl font-semibold text-blue-600">TriggerEvent</h3> <p class="text-sm text-gray-500 mb-4">Represents an incoming security alert.</p> <ul class="space-y-2 text-gray-700"> <li><strong>id:</strong> Integer (PK)</li> <li><strong>event_id:</strong> String</li> <li><strong>host:</strong> String</li> <li><strong>host_id:</strong> String</li> <li><strong>source_ip:</strong> String</li> <li><strong>log:</strong> JSON</li> <li><strong>severity:</strong> String</li> <li><strong>timestamp:</strong> DateTime</li> </ul> </div> <div class="border border-gray-200 rounded-lg p-6 bg-gray-50"> <h3 class="text-xl font-semibold text-green-600">Playbook</h3> <p class="text-sm text-gray-500 mb-4">Defines the automated response workflow.</p> <ul class="space-y-2 text-gray-700"> <li><strong>id:</strong> String (PK)</li> <li><strong>name:</strong> String</li> <li><strong>description:</strong> Text</li> <li><strong>tags:</strong> JSON</li> <li><strong>trigger_type:</strong> String</li> <li><strong>trigger_condition:</strong> Text</li> <li><strong>steps:</strong> JSON</li> </ul> </div> <div class="border border-gray-200 rounded-lg p-6 bg-gray-50"> <h3 class="text-xl font-semibold text-purple-600">PlaybookExecution</h3> <p class="text-sm text-gray-500 mb-4">Logs a specific run of a Playbook.</p> <ul class="space-y-2 text-gray-700"> <li><strong>id:</strong> Integer (PK)</li> <li class="text-blue-600"><strong>playbook_id:</strong> String (FK -> Playbook)</li> <li class="text-green-600"><strong>trigger_event_id:</strong> Integer (FK -> TriggerEvent)</li> <li><strong>status:</strong> String</li> <li><strong>started_at:</strong> DateTime</li> <li><strong>completed_at:</strong> DateTime</li> </ul> </div> </div> </div> </div> <div id="workflow" class="tab-content hidden"> <div class="bg-white p-8 rounded-xl shadow-md"> <h2 class="text-2xl font-bold text-gray-800 mb-2">Playbook Execution Flow</h2> <p class="text-gray-600 mb-8 text-center">This section demonstrates the core logic of the SOAR engine. A trigger event initiates a playbook, which proceeds through several automated steps. <strong>Click on any step</strong> in the workflow diagram below to see how the Jinja2 templating engine dynamically populates action parameters using data from the trigger event.</p> <div class="lg:flex lg:gap-8"> <div class="flex-shrink-0 lg:w-1/3"> <div id="trigger-event-box" class="step-interactive border-2 border-dashed border-yellow-400 bg-yellow-50 rounded-lg p-4 text-center cursor-pointer"> <h4 class="font-bold text-yellow-800">1. Trigger Event</h4> <p class="text-sm text-yellow-700">Credential Dumping Detected</p> </div> <div class="h-10 arrow"></div> <div id="condition-check-box" class="step-interactive border-2 border-gray-300 bg-gray-100 rounded-lg p-4 text-center cursor-pointer"> <h4 class="font-bold">2. Condition Check</h4> <p class="text-sm text-gray-600">`event.log.source == "Security"`</p> </div> <div class="h-10 arrow"></div> <div id="action-step-1" class="step-interactive border-2 border-transparent bg-blue-100 rounded-lg p-4 mb-4 text-center cursor-pointer"> <h4 class="font-bold text-blue-800">Step A: Notify Analyst</h4> </div> <div id="action-step-2" class="step-interactive border-2 border-transparent bg-red-100 rounded-lg p-4 mb-4 text-center cursor-pointer"> <h4 class="font-bold text-red-800">Step B: Isolate Host</h4> </div> <div id="action-step-3" class="step-interactive border-2 border-transparent bg-purple-100 rounded-lg p-4 text-center cursor-pointer"> <h4 class="font-bold text-purple-800">Step C: Create Ticket</h4> </div> </div> <div class="flex-grow mt-8 lg:mt-0"> <div id="details-pane" class="bg-gray-800 rounded-lg p-6 h-full"> <div id="details-initial" class="text-gray-400 text-center flex flex-col justify-center h-full"> <p class="text-lg">Select a step from the workflow to see details.</p> </div> <div id="details-content" class="hidden"> <h3 id="details-title" class="text-xl font-bold text-white mb-4"></h3> <h4 class="text-md font-semibold text-gray-300 mt-4 mb-2">Original Parameters (from Playbook)</h4> <pre id="details-params" class="code-block p-4 rounded-md text-sm whitespace-pre-wrap"></pre> <h4 class="text-md font-semibold text-gray-300 mt-4 mb-2">Rendered Parameters (with Event Data)</h4> <pre id="details-rendered" class="code-block bg-green-900/50 border border-green-500 p-4 rounded-md text-sm whitespace-pre-wrap"></pre> </div> </div> </div> </div> </div> </div> <div id="api" class="tab-content hidden"> <div class="bg-white p-8 rounded-xl shadow-md"> <h2 class="text-2xl font-bold text-gray-800 mb-2">API Endpoints</h2> <p class="text-gray-600 mb-8 text-center">The engine exposes two primary FastAPI endpoints. One for loading new YAML-based playbooks into the system, and another for submitting trigger events to initiate an automated response.</p> <div class="mb-8"> <h3 class="text-xl font-semibold mb-2">POST `/load_playbook/`</h3> <p class="text-gray-600 mb-4">Accepts a raw YAML string in the request body to load and cache a new playbook.</p> <h4 class="text-md font-semibold text-gray-700 mb-2">Example Request Body:</h4> <div class="relative"> <pre id="api-load-body" class="code-block p-4 rounded-md text-sm overflow-x-auto">id: test-playbook-001 name: Test Credential Dumping Response ... steps: - name: Alert Analyst action: notify ... </pre> <button onclick="copyToClipboard('api-load-body')" class="absolute top-2 right-2 bg-gray-600 hover:bg-gray-500 text-white text-xs font-semibold py-1 px-2 rounded">Copy</button> </div> </div> <div> <h3 class="text-xl font-semibold mb-2">POST `/trigger_event/`</h3> <p class="text-gray-600 mb-4">Accepts a JSON object representing a security event, which then triggers the corresponding playbook.</p> <h4 class="text-md font-semibold text-gray-700 mb-2">Example Request Body:</h4> <div class="relative"> <pre id="api-trigger-body" class="code-block p-4 rounded-md text-sm overflow-x-auto">{ "event_id": "evt_12345", "host": "WIN-SERVER-01", "host_id": "host_12345", "playbook_id": "test-playbook-001", "log": { "source": "Security", ... } } </pre> <button onclick="copyToClipboard('api-trigger-body')" class="absolute top-2 right-2 bg-gray-600 hover:bg-gray-500 text-white text-xs font-semibold py-1 px-2 rounded">Copy</button> </div> </div> </div> </div> </main> </div> <script> const tabs = document.querySelectorAll('.tab-button'); const contents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { const target = tab.getAttribute('data-tab'); tabs.forEach(t => t.classList.remove('tab-active')); tab.classList.add('tab-active'); contents.forEach(content => { if (content.id === target) { content.classList.remove('hidden'); } else { content.classList.add('hidden'); } }); }); }); const playbookData = { trigger: { name: "Trigger Event", description: "Credential Dumping Detected", params: { event_id: "evt_12345", host: "WIN-SERVER-01", host_id: "host_12345", source_ip: "192.168.1.100", log: { source: "Security", event_id: 4688, message: "sekurlsa::logonpasswords detected" }, severity: "high" } }, condition: { name: "Condition Check", description: "`event.log.source == 'Security'`", params: { "Condition": "event.log.source == 'Security'" }, rendered: { "Result": "True" } }, steps: [ { name: "Step A: Notify Analyst", params: { channel: "{{ trigger.channel | default('soc_teams') }}", message: "Credential dumping detected on {{ event.host }}" }, rendered: { channel: "soc_teams", message: "Credential dumping detected on WIN-SERVER-01" } }, { name: "Step B: Isolate Host", params: { host_id: "{{ event.host_id }}" }, rendered: { host_id: "host_12345" } }, { name: "Step C: Create Ticket", params: { summary: "Security Incident - {{ event.host }}", severity: "{{ event.severity | default('high') }}" }, rendered: { summary: "Security Incident - WIN-SERVER-01", severity: "high" } } ] }; const detailsInitial = document.getElementById('details-initial'); const detailsContent = document.getElementById('details-content'); const detailsTitle = document.getElementById('details-title'); const detailsParams = document.getElementById('details-params'); const detailsRendered = document.getElementById('details-rendered'); const workflowSteps = document.querySelectorAll('.step-interactive'); function updateDetails(data) { detailsInitial.classList.add('hidden'); detailsContent.classList.remove('hidden'); detailsTitle.textContent = data.name; detailsParams.textContent = JSON.stringify(data.params, null, 2); detailsRendered.textContent = JSON.stringify(data.rendered, null, 2); } function highlightStep(selectedElement) { workflowSteps.forEach(step => step.classList.remove('step-selected')); selectedElement.classList.add('step-selected'); } document.getElementById('trigger-event-box').addEventListener('click', (e) => { const data = { name: playbookData.trigger.name, params: { "Description": playbookData.trigger.description }, rendered: playbookData.trigger.params } updateDetails(data); highlightStep(e.currentTarget); }); document.getElementById('condition-check-box').addEventListener('click', (e) => { updateDetails(playbookData.condition); highlightStep(e.currentTarget); }); document.getElementById('action-step-1').addEventListener('click', (e) => { updateDetails(playbookData.steps[0]); highlightStep(e.currentTarget); }); document.getElementById('action-step-2').addEventListener('click', (e) => { updateDetails(playbookData.steps[1]); highlightStep(e.currentTarget); }); document.getElementById('action-step-3').addEventListener('click', (e) => { updateDetails(playbookData.steps[2]); highlightStep(e.currentTarget); }); function copyToClipboard(elementId) { const text = document.getElementById(elementId).innerText; const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } const ctx = document.getElementById('playbookChart').getContext('2d'); const playbookChart = new Chart(ctx, { type: 'bar', data: { labels: ['Triggers', 'Conditions', 'Action Steps'], datasets: [{ label: 'Number of Components', data: [1, 1, 3], backgroundColor: [ 'rgba(251, 191, 36, 0.6)', 'rgba(209, 213, 219, 0.6)', 'rgba(99, 102, 241, 0.6)' ], borderColor: [ 'rgba(251, 191, 36, 1)', 'rgba(156, 163, 175, 1)', 'rgba(99, 102, 241, 1)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: false } } } }); </script> </body> </html>