# stylish00killer/alice-web architecture

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

- Interactive diagram: https://gitdiagram.com/stylish00killer/alice-web
- Repository: https://github.com/stylish00killer/alice-web

## Overview

This repository is Alice Bot’s static marketing and documentation SPA, not the bot runtime. Visitors enter through the browser, navigate the site’s routes, and browse bot features, commands, setup documentation, changelog, and legal pages. A separate consent flow stores visitor preferences and gates page-view analytics. The diagram reflects documented and indexed dependencies; the bot capabilities described by the site are presented as static content, not executed here. Some page and analytics details are unsampled, so their relationships are included only where the README or source index supports them.

Main entry points: [`src/App.tsx`](https://github.com/stylish00killer/alice-web/blob/main/src/App.tsx) (App shell), [`src/pages/DocsPage.tsx`](https://github.com/stylish00killer/alice-web/blob/main/src/pages/DocsPage.tsx) (Documentation), [`src/lib/analytics.ts`](https://github.com/stylish00killer/alice-web/blob/main/src/lib/analytics.ts) (Analytics), [`src/data/project.ts`](https://github.com/stylish00killer/alice-web/blob/main/src/data/project.ts) (Feature and architecture data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and routing"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app_shell["App shell<br/>[App.tsx]"]
  node_router["SPA router<br/>[router.tsx]"]
  node_analytics["Analytics<br/>[analytics.ts]"]
end

subgraph group_pages["Site content"]
  node_home["Home page<br/>[Home.tsx]"]
  node_features["Features page<br/>[FeaturesPage.tsx]"]
  node_commands["Command reference<br/>[CommandsPage.tsx]"]
  node_docs["Documentation<br/>[DocsPage.tsx]"]
  node_changelog["Changelog page<br/>[ChangelogPage.tsx]"]
  node_legal["Legal pages<br/>[LegalPages.tsx]"]
  node_not_found["Not found page<br/>[NotFoundPage.tsx]"]
end

subgraph group_data["Static site data"]
  node_site_config["Site configuration<br/>[site.ts]"]
  node_project_data["Feature and architecture data<br/>[project.ts]"]
  node_command_data["Command catalogue<br/>[commands.ts]"]
  node_docs_data["Documentation data<br/>[docs.ts]"]
  node_changelog_data["Changelog data<br/>[changelog.ts]"]
end

subgraph group_shared["Shared UI and consent"]
  node_nav["Navigation<br/>[Nav.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_consent_banner["Consent banner<br/>[ConsentBanner.tsx]"]
  node_consent_panel["Consent preferences"]
  node_consent_state["Consent state<br/>[consent.ts]"]
  node_code_block["Code display<br/>[CodeBlock.tsx]"]
  node_page_header["Page header<br/>[PageHeader.tsx]"]
  node_ui["UI primitives<br/>[ui.tsx]"]
  node_ornaments["Decorative elements<br/>[ornaments.tsx]"]
  node_class_names["Class-name helper<br/>[cx.ts]"]
end

node_visitor(("Site visitor"))
node_gtm{{"Google Tag Manager"}}

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_app_shell
node_app_shell -->|"wraps routes"| node_router
node_app_shell -->|"renders"| node_nav
node_app_shell -->|"renders"| node_footer
node_app_shell -->|"renders"| node_consent_banner
node_app_shell -->|"bootstraps and tracks"| node_analytics
node_app_shell -->|"checks consent"| node_consent_state
node_app_shell -->|"routes to"| node_home
node_app_shell -->|"routes to"| node_features
node_app_shell -->|"routes to"| node_commands
node_app_shell -->|"routes to"| node_docs
node_app_shell -->|"routes to"| node_changelog
node_app_shell -->|"routes to"| node_legal
node_app_shell -->|"routes to"| node_not_found
node_consent_banner -->|"reads and updates"| node_consent_state
node_consent_banner -->|"updates consent mode"| node_analytics
node_footer -->|"opens preferences"| node_consent_panel
node_consent_panel -->|"uses preferences"| node_consent_state
node_analytics -->|"reads configuration"| node_site_config
node_analytics -->|"reads consent"| node_consent_state
node_analytics -->|"bootstraps tracking"| node_gtm
node_project_data -->|"re-exports config"| node_site_config
node_features -->|"reads feature data"| node_project_data
node_commands -->|"filters catalogue"| node_command_data
node_docs -->|"reads documentation"| node_docs_data
node_docs -->|"reads command counts"| node_command_data
node_docs -->|"reads project data"| node_project_data
node_changelog -->|"reads entries"| node_changelog_data
node_changelog -->|"reads project data"| node_project_data
node_legal -->|"reads project data"| node_project_data
node_home -.->|"renders sections"| node_features
node_commands -->|"uses copy control"| node_code_block
node_docs -->|"renders examples"| node_code_block
node_docs -->|"renders header"| node_page_header
node_commands -->|"renders header"| node_page_header
node_code_block -->|"uses helper"| node_class_names
node_page_header -->|"uses primitives"| node_ui
node_nav -->|"uses navigation"| node_router
node_footer -->|"uses navigation"| node_router
node_ui -->|"uses links"| node_router
node_ui -->|"uses helper"| node_class_names
node_ornaments -->|"uses helper"| node_class_names

click node_entry "https://github.com/stylish00killer/alice-web/blob/main/src/main.tsx"
click node_app_shell "https://github.com/stylish00killer/alice-web/blob/main/src/App.tsx"
click node_router "https://github.com/stylish00killer/alice-web/blob/main/src/lib/router.tsx"
click node_nav "https://github.com/stylish00killer/alice-web/blob/main/src/components/Nav.tsx"
click node_footer "https://github.com/stylish00killer/alice-web/blob/main/src/components/Footer.tsx"
click node_home "https://github.com/stylish00killer/alice-web/blob/main/src/pages/Home.tsx"
click node_features "https://github.com/stylish00killer/alice-web/blob/main/src/pages/FeaturesPage.tsx"
click node_commands "https://github.com/stylish00killer/alice-web/blob/main/src/pages/CommandsPage.tsx"
click node_docs "https://github.com/stylish00killer/alice-web/blob/main/src/pages/DocsPage.tsx"
click node_changelog "https://github.com/stylish00killer/alice-web/blob/main/src/pages/ChangelogPage.tsx"
click node_legal "https://github.com/stylish00killer/alice-web/blob/main/src/pages/LegalPages.tsx"
click node_not_found "https://github.com/stylish00killer/alice-web/blob/main/src/pages/NotFoundPage.tsx"
click node_site_config "https://github.com/stylish00killer/alice-web/blob/main/src/config/site.ts"
click node_project_data "https://github.com/stylish00killer/alice-web/blob/main/src/data/project.ts"
click node_command_data "https://github.com/stylish00killer/alice-web/blob/main/src/data/commands.ts"
click node_docs_data "https://github.com/stylish00killer/alice-web/blob/main/src/data/docs.ts"
click node_changelog_data "https://github.com/stylish00killer/alice-web/blob/main/src/data/changelog.ts"
click node_consent_banner "https://github.com/stylish00killer/alice-web/blob/main/src/components/ConsentBanner.tsx"
click node_consent_panel "https://github.com/stylish00killer/alice-web/blob/main/src/components/ConsentPreferencesPanel.tsx"
click node_consent_state "https://github.com/stylish00killer/alice-web/blob/main/src/lib/consent.ts"
click node_analytics "https://github.com/stylish00killer/alice-web/blob/main/src/lib/analytics.ts"
click node_code_block "https://github.com/stylish00killer/alice-web/blob/main/src/components/CodeBlock.tsx"
click node_page_header "https://github.com/stylish00killer/alice-web/blob/main/src/components/PageHeader.tsx"
click node_ui "https://github.com/stylish00killer/alice-web/blob/main/src/components/ui.tsx"
click node_ornaments "https://github.com/stylish00killer/alice-web/blob/main/src/components/ornaments.tsx"
click node_class_names "https://github.com/stylish00killer/alice-web/blob/main/src/lib/cx.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_entry,node_app_shell,node_router,node_analytics toneBlue
class node_home,node_features,node_commands,node_docs,node_changelog,node_legal,node_not_found toneAmber
class node_site_config,node_project_data,node_command_data,node_docs_data,node_changelog_data toneMint
class node_nav,node_footer,node_consent_banner,node_consent_panel,node_consent_state,node_code_block,node_page_header,node_ui,node_ornaments,node_class_names toneRose
class node_visitor,node_gtm toneIndigo
```

## Components

### App and routing

- [React entry](https://github.com/stylish00killer/alice-web/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/stylish00killer/alice-web/blob/main/src/App.tsx): `src/App.tsx`
- [SPA router](https://github.com/stylish00killer/alice-web/blob/main/src/lib/router.tsx): `src/lib/router.tsx`
- [Analytics](https://github.com/stylish00killer/alice-web/blob/main/src/lib/analytics.ts): `src/lib/analytics.ts`

### Site content

- [Home page](https://github.com/stylish00killer/alice-web/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Features page](https://github.com/stylish00killer/alice-web/blob/main/src/pages/FeaturesPage.tsx): `src/pages/FeaturesPage.tsx`
- [Command reference](https://github.com/stylish00killer/alice-web/blob/main/src/pages/CommandsPage.tsx): `src/pages/CommandsPage.tsx`
- [Documentation](https://github.com/stylish00killer/alice-web/blob/main/src/pages/DocsPage.tsx): `src/pages/DocsPage.tsx`
- [Changelog page](https://github.com/stylish00killer/alice-web/blob/main/src/pages/ChangelogPage.tsx): `src/pages/ChangelogPage.tsx`
- [Legal pages](https://github.com/stylish00killer/alice-web/blob/main/src/pages/LegalPages.tsx): `src/pages/LegalPages.tsx`
- [Not found page](https://github.com/stylish00killer/alice-web/blob/main/src/pages/NotFoundPage.tsx): `src/pages/NotFoundPage.tsx`

### Static site data

- [Site configuration](https://github.com/stylish00killer/alice-web/blob/main/src/config/site.ts): `src/config/site.ts`
- [Feature and architecture data](https://github.com/stylish00killer/alice-web/blob/main/src/data/project.ts): `src/data/project.ts`
- [Command catalogue](https://github.com/stylish00killer/alice-web/blob/main/src/data/commands.ts): `src/data/commands.ts`
- [Documentation data](https://github.com/stylish00killer/alice-web/blob/main/src/data/docs.ts): `src/data/docs.ts`
- [Changelog data](https://github.com/stylish00killer/alice-web/blob/main/src/data/changelog.ts): `src/data/changelog.ts`

### Shared UI and consent

- [Navigation](https://github.com/stylish00killer/alice-web/blob/main/src/components/Nav.tsx): `src/components/Nav.tsx`
- [Footer](https://github.com/stylish00killer/alice-web/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Consent banner](https://github.com/stylish00killer/alice-web/blob/main/src/components/ConsentBanner.tsx): `src/components/ConsentBanner.tsx`
- [Consent preferences](https://github.com/stylish00killer/alice-web/blob/main/src/components/ConsentPreferencesPanel.tsx): `src/components/ConsentPreferencesPanel.tsx`
- [Consent state](https://github.com/stylish00killer/alice-web/blob/main/src/lib/consent.ts): `src/lib/consent.ts`
- [Code display](https://github.com/stylish00killer/alice-web/blob/main/src/components/CodeBlock.tsx): `src/components/CodeBlock.tsx`
- [Page header](https://github.com/stylish00killer/alice-web/blob/main/src/components/PageHeader.tsx): `src/components/PageHeader.tsx`
- [UI primitives](https://github.com/stylish00killer/alice-web/blob/main/src/components/ui.tsx): `src/components/ui.tsx`
- [Decorative elements](https://github.com/stylish00killer/alice-web/blob/main/src/components/ornaments.tsx): `src/components/ornaments.tsx`
- [Class-name helper](https://github.com/stylish00killer/alice-web/blob/main/src/lib/cx.ts): `src/lib/cx.ts`

### Other components

- **Site visitor**
- **Google Tag Manager**

## Connections

- Site visitor → React entry: opens site (evidence: `README.md`)
- React entry → App shell: mounts (evidence: `src/main.tsx`)
- App shell → SPA router: wraps routes (evidence: `src/App.tsx`)
- App shell → Navigation: renders (evidence: `src/App.tsx`)
- App shell → Footer: renders (evidence: `src/App.tsx`)
- App shell → Consent banner: renders (evidence: `src/App.tsx`)
- App shell → Analytics: bootstraps and tracks (evidence: `src/App.tsx`)
- App shell → Consent state: checks consent (evidence: `src/App.tsx`)
- App shell → Home page: routes to (evidence: `src/App.tsx`)
- App shell → Features page: routes to (evidence: `src/App.tsx`)
- App shell → Command reference: routes to (evidence: `src/App.tsx`)
- App shell → Documentation: routes to (evidence: `src/App.tsx`)
- App shell → Changelog page: routes to (evidence: `src/App.tsx`)
- App shell → Legal pages: routes to (evidence: `src/App.tsx`)
- App shell → Not found page: routes to (evidence: `src/App.tsx`)
- Consent banner → Consent state: reads and updates (evidence: `src/components/ConsentBanner.tsx`)
- Consent banner → Analytics: updates consent mode (evidence: `src/components/ConsentBanner.tsx`)
- Footer → Consent preferences: opens preferences (evidence: `src/components/Footer.tsx`)
- Consent preferences → Consent state: uses preferences (evidence: `src/components/ConsentPreferencesPanel.tsx`)
- Analytics → Site configuration: reads configuration (evidence: `src/lib/analytics.ts`)
- Analytics → Consent state: reads consent (evidence: `src/lib/analytics.ts`)
- Analytics → Google Tag Manager: bootstraps tracking (evidence: `README.md`)
- Feature and architecture data → Site configuration: re-exports config (evidence: `src/data/project.ts`)
- Features page → Feature and architecture data: reads feature data (evidence: `src/pages/FeaturesPage.tsx`)
- Command reference → Command catalogue: filters catalogue (evidence: `src/pages/CommandsPage.tsx`)
- Documentation → Documentation data: reads documentation (evidence: `src/pages/DocsPage.tsx`)
- Documentation → Command catalogue: reads command counts (evidence: `src/pages/DocsPage.tsx`)
- Documentation → Feature and architecture data: reads project data (evidence: `src/pages/DocsPage.tsx`)
- Changelog page → Changelog data: reads entries (evidence: `src/pages/ChangelogPage.tsx`)
- Changelog page → Feature and architecture data: reads project data (evidence: `src/pages/ChangelogPage.tsx`)
- Legal pages → Feature and architecture data: reads project data (evidence: `src/pages/LegalPages.tsx`)
- Home page → Features page: renders sections (evidence: `src/pages/Home.tsx`)
- Command reference → Code display: uses copy control (evidence: `src/pages/CommandsPage.tsx`)
- Documentation → Code display: renders examples (evidence: `src/pages/DocsPage.tsx`)
- Documentation → Page header: renders header (evidence: `src/pages/DocsPage.tsx`)
- Command reference → Page header: renders header (evidence: `src/pages/CommandsPage.tsx`)
- Code display → Class-name helper: uses helper (evidence: `src/components/CodeBlock.tsx`)
- Page header → UI primitives: uses primitives (evidence: `src/components/PageHeader.tsx`)
- Navigation → SPA router: uses navigation (evidence: `src/components/Nav.tsx`)
- Footer → SPA router: uses navigation (evidence: `src/components/Footer.tsx`)
- UI primitives → SPA router: uses links (evidence: `src/components/ui.tsx`)
- UI primitives → Class-name helper: uses helper (evidence: `src/components/ui.tsx`)
- Decorative elements → Class-name helper: uses helper (evidence: `src/components/ornaments.tsx`)