# wanonewan/wanwan architecture

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

- Interactive diagram: https://gitdiagram.com/wanonewan/wanwan
- Repository: https://github.com/wanonewan/wanwan

## Overview

弯弯机 is a browser-based virtual phone and companion app: users enter through its home screen, open simulated apps, and create or manage local content. Major capabilities include AI-assisted chat and novel writing, interactive games, social and messaging apps, and lifestyle apps such as banking, shopping, and music. Data is primarily stored in the browser; settings also configure model APIs. The excerpts show selected storage and feature behavior, but not the page wiring across the full app, so those connections are omitted or marked unverified.

Main entry points: [`js/home.js`](https://github.com/wanonewan/wanwan/blob/main/js/home.js) (Home screen), [`js/db.js`](https://github.com/wanonewan/wanwan/blob/main/js/db.js) (Browser database), [`js/bookstore.js`](https://github.com/wanonewan/wanwan/blob/main/js/bookstore.js) (AI bookstore), [`js/music-page.js`](https://github.com/wanonewan/wanwan/blob/main/js/music-page.js) (Music player)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Phone shell and core"]
  node_entry["App entry<br/>[index.html]"]
  node_home["Home screen<br/>[home.js]"]
  node_settings["Settings<br/>[settings.js]"]
end

subgraph group_creative["Chat and creative"]
  node_characters["Character profiles<br/>[character.js]"]
  node_chat["Chat and messaging<br/>[wechat.js]"]
  node_offline["Offline meetups<br/>[miss-you.js]"]
  node_lorebook["Lorebook<br/>[lorebook.js]"]
  node_bookstore["AI bookstore<br/>[bookstore.js]"]
  node_interactive_games["Interactive games<br/>[avg.js]"]
  node_werewolf["Werewolf game<br/>[werewolf-game.js]"]
end

subgraph group_social["Social and lifestyle apps"]
  node_social_feed["Social feeds<br/>[ig-page.js]"]
  node_phone_apps["Phone apps<br/>[phone-apps.js]"]
  node_bank["Banking and finance<br/>[bank.js]"]
  node_bookshop["Bookstore app<br/>[bookstore.js]"]
  node_takeout["YumYum delivery<br/>[yumyum.js]"]
  node_music["Music player<br/>[music-page.js]"]
  node_terminal["MCP tools<br/>[terminal.js]"]
end

subgraph group_runtime["Storage and runtime"]
  node_database[("Browser database<br/>[db.js]")]
  node_local_storage[("Browser local storage")]
  node_app_runtime["App utilities<br/>[main.js]"]
  node_service_worker["Service worker<br/>[service.js]"]
end

node_user(("Browser user"))
node_model_service{{"Model API"}}
node_mcp_service{{"MCP servers"}}
node_music_api{{"Music API"}}

node_user -->|"opens app"| node_entry
node_entry -.->|"opens home"| node_home
node_home -.->|"opens"| node_settings
node_home -.->|"opens"| node_characters
node_home -.->|"opens"| node_chat
node_home -.->|"opens"| node_offline
node_home -.->|"opens"| node_lorebook
node_home -.->|"opens"| node_bookstore
node_home -.->|"opens"| node_interactive_games
node_home -.->|"opens"| node_werewolf
node_home -.->|"opens"| node_social_feed
node_home -.->|"opens"| node_phone_apps
node_home -.->|"opens"| node_bank
node_home -.->|"opens"| node_bookshop
node_home -.->|"opens"| node_takeout
node_home -.->|"opens"| node_music
node_home -.->|"opens"| node_terminal
node_settings -->|"reads and writes"| node_database
node_app_runtime -->|"reads and writes"| node_database
node_app_runtime -->|"bridges settings"| node_local_storage
node_interactive_games -->|"stores game config"| node_database
node_bank -->|"stores balances"| node_database
node_bookstore -->|"reads characters"| node_database
node_bookstore -.->|"requests writing"| node_model_service
node_social_feed -->|"stores feed data"| node_database
node_takeout -->|"stores orders"| node_database
node_music -->|"stores profile"| node_database
node_music -->|"searches music"| node_music_api
node_terminal -.->|"calls tools"| node_mcp_service
node_service_worker -->|"shows notifications"| node_user

click node_entry "https://github.com/wanonewan/wanwan/blob/main/index.html"
click node_home "https://github.com/wanonewan/wanwan/blob/main/js/home.js"
click node_settings "https://github.com/wanonewan/wanwan/blob/main/js/settings.js"
click node_characters "https://github.com/wanonewan/wanwan/blob/main/js/character.js"
click node_chat "https://github.com/wanonewan/wanwan/blob/main/js/wechat.js"
click node_offline "https://github.com/wanonewan/wanwan/blob/main/js/miss-you.js"
click node_lorebook "https://github.com/wanonewan/wanwan/blob/main/js/lorebook.js"
click node_bookstore "https://github.com/wanonewan/wanwan/blob/main/js/bookstore.js"
click node_interactive_games "https://github.com/wanonewan/wanwan/blob/main/js/avg.js"
click node_werewolf "https://github.com/wanonewan/wanwan/blob/main/js/werewolf-game.js"
click node_social_feed "https://github.com/wanonewan/wanwan/blob/main/js/ig-page.js"
click node_phone_apps "https://github.com/wanonewan/wanwan/blob/main/js/phone-apps.js"
click node_bank "https://github.com/wanonewan/wanwan/blob/main/js/bank.js"
click node_bookshop "https://github.com/wanonewan/wanwan/blob/main/js/bookstore.js"
click node_takeout "https://github.com/wanonewan/wanwan/blob/main/js/yumyum.js"
click node_music "https://github.com/wanonewan/wanwan/blob/main/js/music-page.js"
click node_terminal "https://github.com/wanonewan/wanwan/blob/main/js/terminal.js"
click node_database "https://github.com/wanonewan/wanwan/blob/main/js/db.js"
click node_app_runtime "https://github.com/wanonewan/wanwan/blob/main/js/main.js"
click node_service_worker "https://github.com/wanonewan/wanwan/blob/main/service.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_entry,node_home,node_settings,node_user toneBlue
class node_characters,node_chat,node_offline,node_lorebook,node_bookstore,node_interactive_games,node_werewolf toneAmber
class node_social_feed,node_phone_apps,node_bank,node_bookshop,node_takeout,node_music,node_terminal,node_model_service,node_mcp_service,node_music_api toneMint
class node_database,node_local_storage,node_app_runtime,node_service_worker toneRose
```

## Components

### Phone shell and core

- [App entry](https://github.com/wanonewan/wanwan/blob/main/index.html): `index.html`
- [Home screen](https://github.com/wanonewan/wanwan/blob/main/js/home.js): `js/home.js`
- [Settings](https://github.com/wanonewan/wanwan/blob/main/js/settings.js): `js/settings.js`

### Chat and creative

- [Character profiles](https://github.com/wanonewan/wanwan/blob/main/js/character.js): `js/character.js`
- [Chat and messaging](https://github.com/wanonewan/wanwan/blob/main/js/wechat.js): `js/wechat.js`
- [Offline meetups](https://github.com/wanonewan/wanwan/blob/main/js/miss-you.js): `js/miss-you.js`
- [Lorebook](https://github.com/wanonewan/wanwan/blob/main/js/lorebook.js): `js/lorebook.js`
- [AI bookstore](https://github.com/wanonewan/wanwan/blob/main/js/bookstore.js): `js/bookstore.js`
- [Interactive games](https://github.com/wanonewan/wanwan/blob/main/js/avg.js): `js/avg.js`
- [Werewolf game](https://github.com/wanonewan/wanwan/blob/main/js/werewolf-game.js): `js/werewolf-game.js`

### Social and lifestyle apps

- [Social feeds](https://github.com/wanonewan/wanwan/blob/main/js/ig-page.js): `js/ig-page.js`
- [Phone apps](https://github.com/wanonewan/wanwan/blob/main/js/phone-apps.js): `js/phone-apps.js`
- [Banking and finance](https://github.com/wanonewan/wanwan/blob/main/js/bank.js): `js/bank.js`
- [Bookstore app](https://github.com/wanonewan/wanwan/blob/main/js/bookstore.js): `js/bookstore.js`
- [YumYum delivery](https://github.com/wanonewan/wanwan/blob/main/js/yumyum.js): `js/yumyum.js`
- [Music player](https://github.com/wanonewan/wanwan/blob/main/js/music-page.js): `js/music-page.js`
- [MCP tools](https://github.com/wanonewan/wanwan/blob/main/js/terminal.js): `js/terminal.js`

### Storage and runtime

- [Browser database](https://github.com/wanonewan/wanwan/blob/main/js/db.js): `js/db.js`
- **Browser local storage**
- [App utilities](https://github.com/wanonewan/wanwan/blob/main/js/main.js): `js/main.js`
- [Service worker](https://github.com/wanonewan/wanwan/blob/main/service.js): `service.js`

### Other components

- **Browser user**
- **Model API**
- **MCP servers**
- **Music API**

## Connections

- Browser user → App entry: opens app (evidence: `README.md`)
- App entry → Home screen: opens home
- Home screen → Settings: opens
- Home screen → Character profiles: opens
- Home screen → Chat and messaging: opens
- Home screen → Offline meetups: opens
- Home screen → Lorebook: opens
- Home screen → AI bookstore: opens
- Home screen → Interactive games: opens
- Home screen → Werewolf game: opens
- Home screen → Social feeds: opens
- Home screen → Phone apps: opens
- Home screen → Banking and finance: opens
- Home screen → Bookstore app: opens
- Home screen → YumYum delivery: opens
- Home screen → Music player: opens
- Home screen → MCP tools: opens
- Settings → Browser database: reads and writes (evidence: `js/settings.js`)
- App utilities → Browser database: reads and writes (evidence: `js/main.js`)
- App utilities → Browser local storage: bridges settings (evidence: `js/main.js`)
- Interactive games → Browser database: stores game config (evidence: `js/avg.js`)
- Banking and finance → Browser database: stores balances (evidence: `js/bank.js`)
- AI bookstore → Browser database: reads characters (evidence: `js/bookstore.js`)
- AI bookstore → Model API: requests writing
- Social feeds → Browser database: stores feed data (evidence: `js/ig-page.js`)
- YumYum delivery → Browser database: stores orders (evidence: `js/yumyum.js`)
- Music player → Browser database: stores profile (evidence: `js/music-page.js`)
- Music player → Music API: searches music (evidence: `js/music-page.js`)
- MCP tools → MCP servers: calls tools
- Service worker → Browser user: shows notifications (evidence: `service.js`)