Dashboard Architecture

The Soteria dashboard is a high-performance, single-page application (SPA) built with React, TypeScript, and Vite. It serves as the primary interface for users to interact with the AST-based intelligence engine, visualize code vulnerabilities, and track their security progress through a gamified experience.

Core Technology Stack

Framework: React 18+ (Vite-powered for lightning-fast HMR).
Styling: Tailwind CSS with Custom Variants for theming.
Animations: Framer Motion for high-fidelity transitions and "Cyber-Sentinel" UI effects.
Icons: Lucide React for consistent vector iconography.
State Management: Context API (Auth, Admin, and Gamification logic).

Layout and Navigation System

Soteria uses a modular layout system to differentiate between public landing pages and the authenticated user workspace.

Public vs. Private Layouts

The dashboard employs a conditional layout strategy defined in App.tsx:

Public Views: Pages like LandingPage, Login, and Signup use a PublicNavbar and standalone grid backgrounds for high visual impact.
Authenticated Views: Protected routes are wrapped in a Layout component, which provides a persistent sidebar/navigation structure and consistent spacing for tools like the Scanner and Knowledge Graph.

function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
  return (
    <Layout>
      {children}
    </Layout>
  );
}

Protected Routing Strategy

Access control is enforced at the router level using high-order components. This prevents unauthenticated users from accessing the Intelligence Engine or personal scan history.

User Protection (`ProtectedRoute`)

The ProtectedRoute component checks the isAuthenticated state from the AuthContext. If the user is not logged in, they are redirected to /login.

<Route path="/dashboard" element={
  <ProtectedRoute>
    <AuthenticatedLayout>
      <DesktopHome />
    </AuthenticatedLayout>
  </ProtectedRoute>
} />

Elevated Access (`AdminProtectedRoute`)

For sensitive operations—such as managing the Neural Engine or viewing the Admin Dashboard—the system requires an admin flag. This component verifies both authentication and the is_admin boolean returned by the backend JWT.

Contextual State Management

The dashboard's behavior is driven by three primary React Contexts that maintain state across the application:

Scanner Interface & API Integration

The heart of the dashboard is the Scanner component, which communicates with the Flask Intelligence Engine via a dedicated API utility.

Usage Example: The dashboard sends raw code to the /analyze endpoint. The frontend handles the token injection automatically via the scannerApi helper.

// frontend/src/lib/api.ts
export const scannerApi = {
    async analyzeCode(code: string) {
        const token = localStorage.getItem('soteria_token');
        const response = await fetch(`${API_BASE_URL}/analyze`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ code }),
        });
        return response.json();
    }
}

Visual Experience & Feedback

To maintain a "Cyber Sentinel" aesthetic, the architecture includes:

Animated Grid Backgrounds: Radial gradients with breathing pulses to indicate active monitoring.
Scan Lines: CSS-driven horizontal animations that simulate real-time code parsing.
Real-Time Feedback: Loading states utilize custom spinners and Framer Motion AnimatePresence to ensure smooth transitions between idle and processing states.

Dashboard Architecture