# nievacode-dev/macos-tahoe-web architecture

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

- Interactive diagram: https://gitdiagram.com/nievacode-dev/macos-tahoe-web
- Repository: https://github.com/nievacode-dev/macos-tahoe-web

## Overview

This is a browser-based macOS Tahoe interface replica. A user interacts with the desktop shell, whose handlers manage dock and system panels or open app windows; Finder and Terminal share a mock file system, while app-specific windows provide features such as settings, notes, browser, and FaceTime. The README documents additional window behavior and Finder/Terminal capabilities; source excerpts are partial, so uncertain internal wiring is omitted.

Main entry points: [`js/window.js`](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js) (Window Manager), [`js/main.js`](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js) (Desktop Handlers), [`index.html`](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/index.html) (Desktop UI), [`sw.js`](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/sw.js) (Offline Cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Desktop Shell"]
  node_desktop["Desktop UI<br/>[index.html]"]
  node_visuals["Shell Styling<br/>[style.css]"]
  node_windowstyles["Window Styling<br/>[window.css]"]
end

subgraph group_interactions["System Interactions"]
  node_shellhandlers["Desktop Handlers<br/>[main.js]"]
  node_lockscreen["Lock Screen<br/>[main.js]"]
  node_controlcenter["Control Center<br/>[main.js]"]
  node_spotlight["Spotlight Search<br/>[main.js]"]
  node_launchpad["Launchpad<br/>[main.js]"]
end

subgraph group_apps["Apps and Windows"]
  node_windowmanager["Window Manager<br/>[window.js]"]
  node_finder["Finder<br/>[window.js]"]
  node_terminal["Terminal<br/>[window.js]"]
  node_aboutmac["About This Mac<br/>[window.js]"]
  node_settings["Settings<br/>[window.js]"]
  node_notes["Notes<br/>[window.js]"]
  node_browser["Browser<br/>[window.js]"]
  node_facetime["FaceTime<br/>[window.js]"]
end

subgraph group_state["State and Offline"]
  node_mockfs[("Mock File System<br/>[window.js]")]
  node_localstorage[("Browser Storage")]
  node_serviceworker["Offline Cache<br/>[sw.js]"]
end

node_user(("User"))
node_camera(("Device Camera"))
node_network(("Web Network"))

node_user -->|"interacts with"| node_desktop
node_desktop -->|"styled by"| node_visuals
node_desktop -->|"window styles"| node_windowstyles
node_desktop -->|"handles events"| node_shellhandlers
node_shellhandlers -->|"manages"| node_lockscreen
node_shellhandlers -->|"toggles"| node_controlcenter
node_shellhandlers -->|"searches"| node_spotlight
node_shellhandlers -->|"opens"| node_launchpad
node_shellhandlers -->|"opens windows"| node_windowmanager
node_windowmanager -->|"creates app"| node_finder
node_windowmanager -->|"creates app"| node_terminal
node_windowmanager -->|"creates app"| node_aboutmac
node_windowmanager -->|"creates app"| node_settings
node_windowmanager -->|"creates app"| node_notes
node_windowmanager -->|"creates app"| node_browser
node_windowmanager -->|"creates app"| node_facetime
node_finder -->|"reads and writes"| node_mockfs
node_terminal -->|"reads and writes"| node_mockfs
node_mockfs -->|"persists through"| node_localstorage
node_windowmanager -->|"loads state"| node_localstorage
node_facetime -.->|"requests access"| node_camera
node_browser -.->|"loads pages"| node_network
node_user -->|"requests resources"| node_serviceworker
node_serviceworker -->|"fetches misses"| node_network
node_serviceworker -->|"serves cached assets"| node_desktop

click node_desktop "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/index.html"
click node_visuals "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/style.css"
click node_windowstyles "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/css/window.css"
click node_shellhandlers "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js"
click node_lockscreen "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js"
click node_controlcenter "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js"
click node_spotlight "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js"
click node_launchpad "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js"
click node_windowmanager "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_finder "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_terminal "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_aboutmac "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_settings "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_notes "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_browser "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_facetime "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_mockfs "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js"
click node_serviceworker "https://github.com/nievacode-dev/macos-tahoe-web/blob/main/sw.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_desktop,node_visuals,node_windowstyles,node_user toneBlue
class node_shellhandlers,node_lockscreen,node_controlcenter,node_spotlight,node_launchpad toneAmber
class node_windowmanager,node_finder,node_terminal,node_aboutmac,node_settings,node_notes,node_browser,node_facetime toneMint
class node_mockfs,node_localstorage,node_serviceworker toneRose
class node_camera,node_network toneIndigo
```

## Components

### Desktop Shell

- [Desktop UI](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/index.html): `index.html`
- [Shell Styling](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/style.css): `style.css`
- [Window Styling](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/css/window.css): `css/window.css`

### System Interactions

- [Desktop Handlers](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js): `js/main.js`
- [Lock Screen](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js): `js/main.js`
- [Control Center](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js): `js/main.js`
- [Spotlight Search](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js): `js/main.js`
- [Launchpad](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/main.js): `js/main.js`

### Apps and Windows

- [Window Manager](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [Finder](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [Terminal](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [About This Mac](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [Settings](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [Notes](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [Browser](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- [FaceTime](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`

### State and Offline

- [Mock File System](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/js/window.js): `js/window.js`
- **Browser Storage**
- [Offline Cache](https://github.com/nievacode-dev/macos-tahoe-web/blob/main/sw.js): `sw.js`

### Other components

- **User**
- **Device Camera**
- **Web Network**

## Connections

- User → Desktop UI: interacts with
- Desktop UI → Shell Styling: styled by
- Desktop UI → Window Styling: window styles
- Desktop UI → Desktop Handlers: handles events
- Desktop Handlers → Lock Screen: manages
- Desktop Handlers → Control Center: toggles
- Desktop Handlers → Spotlight Search: searches
- Desktop Handlers → Launchpad: opens
- Desktop Handlers → Window Manager: opens windows
- Window Manager → Finder: creates app
- Window Manager → Terminal: creates app
- Window Manager → About This Mac: creates app
- Window Manager → Settings: creates app
- Window Manager → Notes: creates app
- Window Manager → Browser: creates app
- Window Manager → FaceTime: creates app
- Finder → Mock File System: reads and writes
- Terminal → Mock File System: reads and writes
- Mock File System → Browser Storage: persists through
- Window Manager → Browser Storage: loads state
- FaceTime → Device Camera: requests access
- Browser → Web Network: loads pages
- User → Offline Cache: requests resources
- Offline Cache → Web Network: fetches misses
- Offline Cache → Desktop UI: serves cached assets