Human Error Simulator

The Human Error Simulator (HES) Dashboard is a sophisticated, security-focused developer tool designed to bridge the gap between theoretical security vulnerabilities and the messy reality of human mistakes in software engineering.

Rather than just listing common CVEs, this application provides a controlled, sandboxed environment where "Human Error" is treated as an engine-driven event, allowing teams to visualize, audit, and learn from realistic slip-ups.

1. Conceptual Architecture

The application is structured into two primary domains:

The Simulation Engine: A complete Python project (visible via the integrated code explorer) that contains logic for mutating configurations, generating weak credentials based on human behavioral patterns (like using seasons or common names), and creating "forgotten" artifacts like backup files or developer notes.

The Orchestration Dashboard: A React-based frontend that acts as the command center for running these simulations and analyzing the resulting vulnerabilities.

2. Key Features & Functionality

The Simulator Dashboard (Mission Control)

The heart of the app is the Simulation Center. When a user triggers a "Full Simulation":

Sandbox Orchestration: The backend logic builds a temporary filesystem structure (mimicking a real project with /configs, /logs, and /backups).

Heuristic Vulnerability Generation: The engine injects flaws such as world-readable .env files, hardcoded credentials in "test scripts," and verbose logging that leaks session tokens.

Real-time Analytics: The UI instantly parses the simulation results into high-impact stats: Errors Found, Files Created, Weak Credentials generated, and Data Exposures.

Actionable Intelligence: Each finding is presented with a severity rating (Critical to Low), detailed impact analysis, and specific Remediation steps, turning a "mistake" into a teaching moment.

Integrated Project Explorer

To provide full transparency, the app includes a world-class Code Viewer. Users can browse the underlying Python source code that powers the simulator:

Core Modules: View the EnvironmentBuilder, ConfigMutator, and WeakCredentialGenerator.

Scenario Definitions: See exactly how the misconfigurations.py scenario manipulates a system to create risk.

CLI & Schema: Understand the data structures that define a "Human Error" within the system.

3. Visual & UX Design (Aesthetics)

Designed with a "Cyber-Security Operations Center" (SOC) aesthetic:

Dark-Mode First: A deep slate-950 and slate-900 palette minimizes eye strain and emphasizes the high-contrast status colors (Orange for warnings, Red for critical errors).

Typography: The app pairs Inter for clean UI legibility with Fira Code for a specialized, developer-centric "code-font" experience in the evidence and source views.

Micro-interactions: Smooth transitions between the dashboard and code view, copy-to-clipboard feedback, and an "Activity" spinner that simulates the engine's processing time.

4. Technical Use Cases

Security Training: Helping junior developers recognize what a "small mistake" looks like to an attacker.

Tool Benchmarking: Providing a "dirty" environment to test if security scanners or linting tools can actually catch realistic human errors.

DevSecOps Advocacy: Visualizing the frequency and impact of configuration drift and accidental exposures in a way that is easy for stakeholders to understand.

In short, the Human Error Simulator isn't just a dashboard; it's an educational playground that helps teams build more resilient systems by first understanding how they break.