# bitsfront/bitsfront-mvp architecture

> Architecture diagram of the GitHub repository bitsfront/bitsfront-mvp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bitsfront/bitsfront-mvp
- Repository: https://github.com/bitsfront/bitsfront-mvp

## Overview

#### Purpose and Entry Points
This is a React/TypeScript security-intelligence dashboard, organized as a single-page client application with many operational views: threat monitoring, incidents, exposure, governance, reporting, and asset intelligence. The browser entry chain is `index.html` → `src/main.tsx` → `src/App.tsx`. A separate `server.ts` suggests an optional server-side runtime or local integration boundary.

#### Application Shell and Navigation
`src/App.tsx` is the likely orchestration point for application state, screen selection, authentication gating, and composition of dashboard modules. Identity and access UI are separated into `src/components/LoginView.tsx`, `src/components/AuthModal.tsx`, and `src/components/LockScreen.tsx`; these form the primary user-session boundary before protected operational views are shown.

#### Operational Dashboard Domains
The component layer is partitioned by security workflow rather than generic UI primitives:
- Command, overview, and live status: `src/components/AICommandCenter.tsx`, `src/components/OverviewDashboard.tsx`, `src/components/ActiveMonitoring.tsx`.
- Threat and breach intelligence: `src/components/ThreatIntelligenceFeeds.tsx`, `src/components/BreachIntelligence.tsx`, `src/components/DarkWebMonitoring.tsx`.
- Incident handling and response: `src/components/IncidentsView.tsx`, `src/components/TriageView.tsx`, `src/components/ResponseView.tsx`.
- Asset, people, and exposure analysis: `src/components/DigitalAssetInventory.tsx`, `src/components/PeopleIntelligence.tsx`, `src/components/ExposureView.tsx`.
- Governance and reporting: `src/components/GovernanceEndpoints.tsx`, `src/components/ReportingView.tsx`, `src/components/RegulatoryOverviewDashboard.tsx`.

These views are likely selected from the shell and consume shared local, Firebase-backed, or AI-derived data.

#### Data and Intelligence Inputs
The repository contains bundled datasets that can seed or drive dashboard visualizations: `src/data/breachData.ts`, `src/data/incidentData.ts`, `src/data/threatFeedsData.ts`, `src/data/sampleAssets.ts`, and `src/data/vulnerabilities.json`. This establishes a local-data boundary: UI components can render meaningful security scenarios without requiring live external feeds. Domain typing begins with `src/types/asset.ts`.

#### External-Service Boundaries
Firebase is the principal persistence/authentication integration, isolated in `src/lib/firebase.ts`, with access controls represented by `firestore.rules` and `DRAFT_firestore.rules`. The repository also includes Firebase deployment/configuration artifacts: `firebase-applet-config.json` and `firebase-blueprint.json`.

Generative-AI integration is isolated behind `src/services/geminiService.ts`; AI-facing screens such as `src/components/CognitionEngine.tsx` and `src/components/AIAgentsInventory.tsx` should depend on that service boundary rather than call providers directly.

#### Reporting and Output
PDF/report export capability is encapsulated in `src/lib/pdfExport.ts`, separating document generation from operational screens such as `src/components/ReportingView.tsx` and `src/components/PostMortemView.tsx`. This is an important output boundary for regulatory or incident-response workflows.

#### Runtime and Delivery Shape
The frontend is a Vite-based React application, indicated by `vite.config.ts`, `src/main.tsx`, and `index.html`, with Bun/npm lockfiles (`bun.lock`, `package-lock.json`) supporting JavaScript package execution. Client environment values are expected through `.env.example`; Firebase and Gemini credentials/configuration should remain outside the UI components and flow through their respective integration modules.

Main entry points: [`src/App.tsx`](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/App.tsx) (Application Shell), [`src/data/breachData.ts`](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/data/breachData.ts) (Bundled Security Data), [`src/components/DigitalAssetInventory.tsx`](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/DigitalAssetInventory.tsx) (Asset & Exposure), [`src/lib/firebase.ts`](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/lib/firebase.ts) (Firebase Adapter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_html["Browser HTML<br/>entry document<br/>[index.html]"]
  node_main["React Bootstrap<br/>client entry<br/>[main.tsx]"]
  node_server["Optional Server<br/>server runtime<br/>[server.ts]"]
end

subgraph group_shell["App Shell &amp; Access"]
  node_app["Application Shell<br/>React orchestration<br/>[App.tsx]"]
  node_access["Session Access UI<br/>auth views<br/>[LoginView.tsx]"]
end

subgraph group_operations["Security Operations"]
  node_command["Command &amp; Monitoring<br/>operational views"]
  node_threats["Threat Intelligence<br/>operational views"]
  node_incidents["Incident Response<br/>operational views<br/>[IncidentsView.tsx]"]
  node_exposure["Asset &amp; Exposure<br/>operational views"]
  node_governance["Governance Views<br/>operational views"]
  node_ai_views["AI Intelligence Views<br/>operational views"]
end

subgraph group_data["Data &amp; Integrations"]
  node_local_data[("Bundled Security Data<br/>seed datasets<br/>[breachData.ts]")]
  node_asset_types["Asset Types<br/>domain types<br/>[asset.ts]"]
  node_firebase[("Firebase Adapter<br/>auth and persistence<br/>[firebase.ts]")]
  node_firestore_rules["Firestore Rules<br/>access policy<br/>[firestore.rules]"]
  node_gemini["Gemini Service<br/>AI integration<br/>[geminiService.ts]"]
end

subgraph group_output["Reporting"]
  node_reporting["Reporting Screens<br/>report workflows<br/>[ReportingView.tsx]"]
  node_pdf["PDF Export<br/>document generation<br/>[pdfExport.ts]"]
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"gates session"| node_access
node_app -->|"selects"| node_command
node_app -->|"selects"| node_threats
node_app -->|"selects"| node_incidents
node_app -->|"selects"| node_exposure
node_app -->|"selects"| node_governance
node_app -->|"selects"| node_ai_views
node_access -->|"authenticates via"| node_firebase
node_firebase -.->|"enforced by"| node_firestore_rules
node_command -->|"renders data"| node_local_data
node_threats -->|"renders feeds"| node_local_data
node_incidents -->|"renders incidents"| node_local_data
node_exposure -->|"renders assets"| node_local_data
node_exposure -->|"uses"| node_asset_types
node_ai_views -->|"requests intelligence"| node_gemini
node_governance -->|"opens reports"| node_reporting
node_reporting -->|"exports"| node_pdf
node_server -.->|"optional integration"| node_firebase

click node_html "https://github.com/bitsfront/bitsfront-mvp/blob/main/index.html"
click node_main "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/main.tsx"
click node_app "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/App.tsx"
click node_server "https://github.com/bitsfront/bitsfront-mvp/blob/main/server.ts"
click node_access "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/LoginView.tsx"
click node_command "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/AICommandCenter.tsx"
click node_threats "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/ThreatIntelligenceFeeds.tsx"
click node_incidents "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/IncidentsView.tsx"
click node_exposure "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/DigitalAssetInventory.tsx"
click node_governance "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/GovernanceEndpoints.tsx"
click node_ai_views "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/CognitionEngine.tsx"
click node_local_data "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/data/breachData.ts"
click node_asset_types "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/types/asset.ts"
click node_firebase "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/lib/firebase.ts"
click node_firestore_rules "https://github.com/bitsfront/bitsfront-mvp/blob/main/firestore.rules"
click node_gemini "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/services/geminiService.ts"
click node_reporting "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/ReportingView.tsx"
click node_pdf "https://github.com/bitsfront/bitsfront-mvp/blob/main/src/lib/pdfExport.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_html,node_main,node_server toneBlue
class node_app,node_access toneAmber
class node_command,node_threats,node_incidents,node_exposure,node_governance,node_ai_views toneMint
class node_local_data,node_asset_types,node_firebase,node_firestore_rules,node_gemini toneRose
class node_reporting,node_pdf toneIndigo
```

## Components

### Runtime

- [Browser HTML](https://github.com/bitsfront/bitsfront-mvp/blob/main/index.html): entry document · `index.html`
- [React Bootstrap](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/main.tsx): client entry · `src/main.tsx`
- [Optional Server](https://github.com/bitsfront/bitsfront-mvp/blob/main/server.ts): server runtime · Local or server-side integration boundary. · `server.ts`

### App Shell & Access

- [Application Shell](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/App.tsx): React orchestration · Selects screens and gates operational views. · `src/App.tsx`
- [Session Access UI](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/LoginView.tsx): auth views · Login, modal, and lock-screen experiences. · `src/components/LoginView.tsx`

### Security Operations

- [Command & Monitoring](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/AICommandCenter.tsx): operational views · Command center, overview, and active monitoring. · `src/components/AICommandCenter.tsx`
- [Threat Intelligence](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/ThreatIntelligenceFeeds.tsx): operational views · Threat feeds, breach intelligence, and dark-web monitoring. · `src/components/ThreatIntelligenceFeeds.tsx`
- [Incident Response](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/IncidentsView.tsx): operational views · Incident, triage, and response workflows. · `src/components/IncidentsView.tsx`
- [Asset & Exposure](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/DigitalAssetInventory.tsx): operational views · Asset inventory, people intelligence, and exposure analysis. · `src/components/DigitalAssetInventory.tsx`
- [Governance Views](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/GovernanceEndpoints.tsx): operational views · Governance, reporting, and regulatory dashboards. · `src/components/GovernanceEndpoints.tsx`
- [AI Intelligence Views](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/CognitionEngine.tsx): operational views · Cognition engine and AI-agent inventory. · `src/components/CognitionEngine.tsx`

### Data & Integrations

- [Bundled Security Data](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/data/breachData.ts): seed datasets · Local breach, incident, feed, asset, and vulnerability scenarios. · `src/data/breachData.ts`
- [Asset Types](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/types/asset.ts): domain types · `src/types/asset.ts`
- [Firebase Adapter](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/lib/firebase.ts): auth and persistence · Central Firebase integration boundary. · `src/lib/firebase.ts`
- [Firestore Rules](https://github.com/bitsfront/bitsfront-mvp/blob/main/firestore.rules): access policy · `firestore.rules`
- [Gemini Service](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/services/geminiService.ts): AI integration · Isolates generative-AI provider access. · `src/services/geminiService.ts`

### Reporting

- [Reporting Screens](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/components/ReportingView.tsx): report workflows · Reporting and post-mortem operational output. · `src/components/ReportingView.tsx`
- [PDF Export](https://github.com/bitsfront/bitsfront-mvp/blob/main/src/lib/pdfExport.ts): document generation · Encapsulates report export. · `src/lib/pdfExport.ts`

## Connections

- Browser HTML → React Bootstrap: loads
- React Bootstrap → Application Shell: mounts
- Application Shell → Session Access UI: gates session
- Application Shell → Command & Monitoring: selects
- Application Shell → Threat Intelligence: selects
- Application Shell → Incident Response: selects
- Application Shell → Asset & Exposure: selects
- Application Shell → Governance Views: selects
- Application Shell → AI Intelligence Views: selects
- Session Access UI → Firebase Adapter: authenticates via
- Firebase Adapter → Firestore Rules: enforced by
- Command & Monitoring → Bundled Security Data: renders data
- Threat Intelligence → Bundled Security Data: renders feeds
- Incident Response → Bundled Security Data: renders incidents
- Asset & Exposure → Bundled Security Data: renders assets
- Asset & Exposure → Asset Types: uses
- AI Intelligence Views → Gemini Service: requests intelligence
- Governance Views → Reporting Screens: opens reports
- Reporting Screens → PDF Export: exports
- Optional Server → Firebase Adapter: optional integration