Gamification & Knowledge Graph

Transforming Security into an Interactive Experience

Soteria goes beyond traditional static analysis by turning code security into a structured learning journey. By integrating a gamified progression system with a dynamic Knowledge Graph, the platform ensures that identifying vulnerabilities is not just a technical task, but a step toward mastery.

The Gamification Engine

The gamification system is designed to incentivize proactive security habits. Built into the GameProvider context, it tracks user engagement and provides visual feedback on growth.

XP and Leveling System

Every action within the pipeline—from performing scans to reviewing AI-generated explanations—contributes to your Experience Points (XP).

• Progression Tiers: Users evolve through ranks, starting as a Novice and advancing to Security Architect.
• XP Triggers:
  • Successful Scans: Analyzing code snippets for vulnerabilities.
  • Remediation Learning: Engaging with the "AI-Powered Explanations" to understand the why behind a flag.
  • Deep Dives: Exploring the structural DNA of malicious code in the Knowledge Graph.

Learning Streaks

To encourage consistency, Soteria tracks daily activity.

• The Flame Metric: Represented by the Flame icon in the dashboard, streaks visualize how many consecutive days you have engaged with the security pipeline.
• Retention: Streaks are designed to turn security auditing from a "once-per-release" chore into a daily developer habit.

The Security Knowledge Graph

The Knowledge Graph is a D3.js-powered interactive visualization that maps the relationship between code structures and security risks. It allows you to peer into the "Mind of the Model."

Visualizing Structural DNA

Unlike traditional logs, the Knowledge Graph represents Python functions as nodes in a multi-dimensional space.

• Node Types: Represents AST elements such as Assign, Call, BinOp, and Attribute.
• Edges: Illustrate the frequency and relationships between these nodes within a specific function.
• Color Coding:
  • <span style="color: #10b981;">Green Nodes:</span> Represent structural patterns associated with "Clean" code.
  • <span style="color: #ef4444;">Red Nodes:</span> Represent patterns identified in "Malicious" or "Corrupted" code (e.g., high density of Attribute calls combined with obfuscated Assign logic).

Interactive Exploration

Users can interact with the graph to understand how the Random Forest and Neural Engine classify code:

1. Zoom & Pan: Navigate through complex datasets of vectorized functions.
2. Node Inspection: Hover over nodes to see the specific AST distribution that led to a security label.
3. Real-time Updates: As the background watch_data.py process retrains the model, the graph evolves to reflect the latest intelligence.

How to Access

Both systems are integrated directly into the authenticated user dashboard:

• View Stats: Your current level, XP, and streak are visible in the top navigation bar of the Scanner and Dashboard pages.
• Explore Graph: Navigate to the /graph route via the sidebar to access the full D3 visualization.

// Example of how GameContext is wrapped in the App
<AuthProvider>
  <GameProvider> 
    <Router>
      <Routes>
        <Route path="/graph" element={<KnowledgeGraph />} />
        {/* User stats are globally accessible via useGame() hook */}
      </Routes>
    </Router>
  </GameProvider>
</AuthProvider>

By combining these elements, Soteria helps developers transition from reactive patching to proactive structural security.