# bluviper/securevault architecture

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

- Interactive diagram: https://gitdiagram.com/bluviper/securevault
- Repository: https://github.com/bluviper/securevault

## Overview

SecureVault is an offline-first password manager delivered as a browser app and a Manifest V3 extension. The main workflow initializes or unlocks a vault, derives a key and decrypts credentials, then supports managing, importing/exporting, and optionally syncing encrypted vault data. The extension adds its own popup unlock and domain-aware credential selection before dispatching autofill to the active page. The sampled app excerpt confirms encryption, local persistence, entry management, imports/exports, and GitHub sync; other documented capabilities are represented only where README evidence supports them.

Main entry points: [`src/app.js`](https://github.com/bluviper/securevault/blob/master/src/app.js) (Vault logic), [`extension/popup/popup.js`](https://github.com/bluviper/securevault/blob/master/extension/popup/popup.js) (Extension popup), [`extension/background/service_worker.js`](https://github.com/bluviper/securevault/blob/master/extension/background/service_worker.js) (Extension session and dispatcher), [`src/index.html`](https://github.com/bluviper/securevault/blob/master/src/index.html) (Vault interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_vault["Core Vault"]
  node_webapp["Vault interface<br/>[index.html]"]
  node_core["Vault logic<br/>[app.js]"]
  node_crypto["Key derivation and encryption<br/>[app.js]"]
  node_localstore[("Browser local storage")]
end

subgraph group_management["Credential Tools"]
  node_credentialui["Credential ledger<br/>[app.js]"]
  node_security["Password security analysis<br/>[app.js]"]
  node_generator["Password generator<br/>[app.js]"]
  node_import["Vault imports<br/>[app.js]"]
  node_export["Vault exports<br/>[app.js]"]
end

subgraph group_extension["Browser Extension"]
  node_popup["Extension popup<br/>[popup.js]"]
  node_worker["Extension session and dispatcher<br/>[service_worker.js]"]
  node_content["Page autofill<br/>[content.js]"]
end

subgraph group_sync["Encrypted Portability"]
  node_vaultfile["Encrypted vault file"]
  node_github[("GitHub repository")]
end

node_user(("Vault user"))
node_activepage(("Active browser page"))

node_user -->|"opens"| node_webapp
node_webapp -.->|"invokes"| node_core
node_core -->|"derives and encrypts"| node_crypto
node_core -->|"persists encrypted data"| node_localstore
node_core -->|"renders and edits"| node_credentialui
node_credentialui -->|"assesses strength"| node_security
node_core -.->|"generates passwords"| node_generator
node_core -->|"imports records"| node_import
node_core -->|"exports records"| node_export
node_core -->|"exports encrypted payload"| node_vaultfile
node_vaultfile -->|"loads payload"| node_core
node_core -->|"pushes encrypted payload"| node_github
node_github -.->|"pulls encrypted payload"| node_core
node_user -->|"uses extension"| node_popup
node_popup -->|"derives and decrypts"| node_crypto
node_popup -->|"stores or clears session"| node_worker
node_popup -->|"detects active domain"| node_activepage
node_popup -->|"requests autofill"| node_worker
node_worker -->|"dispatches credentials"| node_content
node_content -->|"fills form fields"| node_activepage

click node_webapp "https://github.com/bluviper/securevault/blob/master/src/index.html"
click node_core "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_crypto "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_credentialui "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_security "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_generator "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_import "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_export "https://github.com/bluviper/securevault/blob/master/src/app.js"
click node_popup "https://github.com/bluviper/securevault/blob/master/extension/popup/popup.js"
click node_worker "https://github.com/bluviper/securevault/blob/master/extension/background/service_worker.js"
click node_content "https://github.com/bluviper/securevault/blob/master/extension/content/content.js"

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_webapp,node_core,node_crypto,node_localstore,node_user,node_activepage toneBlue
class node_credentialui,node_security,node_generator,node_import,node_export toneAmber
class node_popup,node_worker,node_content toneMint
class node_vaultfile,node_github toneRose
```

## Components

### Core Vault

- [Vault interface](https://github.com/bluviper/securevault/blob/master/src/index.html): `src/index.html`
- [Vault logic](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- [Key derivation and encryption](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- **Browser local storage**

### Credential Tools

- [Credential ledger](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- [Password security analysis](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- [Password generator](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- [Vault imports](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`
- [Vault exports](https://github.com/bluviper/securevault/blob/master/src/app.js): `src/app.js`

### Browser Extension

- [Extension popup](https://github.com/bluviper/securevault/blob/master/extension/popup/popup.js): `extension/popup/popup.js`
- [Extension session and dispatcher](https://github.com/bluviper/securevault/blob/master/extension/background/service_worker.js): `extension/background/service_worker.js`
- [Page autofill](https://github.com/bluviper/securevault/blob/master/extension/content/content.js): `extension/content/content.js`

### Encrypted Portability

- **Encrypted vault file**
- **GitHub repository**

### Other components

- **Vault user**
- **Active browser page**

## Connections

- Vault user → Vault interface: opens (evidence: `README.md`)
- Vault interface → Vault logic: invokes
- Vault logic → Key derivation and encryption: derives and encrypts (evidence: `src/app.js`)
- Vault logic → Browser local storage: persists encrypted data (evidence: `src/app.js`)
- Vault logic → Credential ledger: renders and edits (evidence: `src/app.js`)
- Credential ledger → Password security analysis: assesses strength (evidence: `src/app.js`)
- Vault logic → Password generator: generates passwords (evidence: `src/app.js`)
- Vault logic → Vault imports: imports records (evidence: `src/app.js`)
- Vault logic → Vault exports: exports records (evidence: `src/app.js`)
- Vault logic → Encrypted vault file: exports encrypted payload (evidence: `src/app.js`)
- Encrypted vault file → Vault logic: loads payload (evidence: `src/app.js`)
- Vault logic → GitHub repository: pushes encrypted payload (evidence: `src/app.js`)
- GitHub repository → Vault logic: pulls encrypted payload
- Vault user → Extension popup: uses extension (evidence: `README.md`)
- Extension popup → Key derivation and encryption: derives and decrypts (evidence: `extension/popup/popup.js`)
- Extension popup → Extension session and dispatcher: stores or clears session (evidence: `extension/popup/popup.js`)
- Extension popup → Active browser page: detects active domain (evidence: `extension/popup/popup.js`)
- Extension popup → Extension session and dispatcher: requests autofill (evidence: `extension/background/service_worker.js`)
- Extension session and dispatcher → Page autofill: dispatches credentials (evidence: `extension/background/service_worker.js`)
- Page autofill → Active browser page: fills form fields (evidence: `extension/content/content.js`)