# afnanlabs/afnan-workspace architecture

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

- Interactive diagram: https://gitdiagram.com/afnanlabs/afnan-workspace
- Repository: https://github.com/afnanlabs/afnan-workspace

## Overview

Afnan Workspace is a portfolio presented as a VS Code-like workspace. Visitors choose a terminal command interface or a standard editor; the terminal can launch project content and arcade games, while the editor offers file browsing, search, settings, and commands. Both views draw on shared portfolio content. The arcade tracks local high scores, and the app also provides résumé downloads, theme/audio preferences, analytics, and offline PWA support. Relationships reflect the excerpts and README; unsampled feature wiring is not inferred.

Main entry points: [`src/components/standard/StandardView.tsx`](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/StandardView.tsx) (Standard view), [`src/App.tsx`](https://github.com/afnanlabs/afnan-workspace/blob/master/src/App.tsx) (App shell), [`src/components/Header.tsx`](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/Header.tsx) (Workspace header), [`src/components/terminal/TerminalView.tsx`](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/TerminalView.tsx) (Terminal view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Workspace shell"]
  node_shell["App shell<br/>[App.tsx]"]
  node_header["Workspace header<br/>[Header.tsx]"]
end

subgraph group_portfolio["Portfolio experiences"]
  node_terminal["Terminal view<br/>[TerminalView.tsx]"]
end

subgraph group_editor["Standard editor"]
  node_standard["Standard view<br/>[StandardView.tsx]"]
  node_editor_components["Explorer and editor"]
  node_palette["Command palette<br/>[CommandPalette.tsx]"]
  node_search["Workspace search<br/>[SearchPanel.tsx]"]
  node_menubar["Menubar<br/>[Menubar.tsx]"]
  node_settings["Settings panel<br/>[SettingsPanel.tsx]"]
  node_status["Status bar<br/>[StatusBar.tsx]"]
end

subgraph group_arcade["Arcade"]
  node_arcade_window["Arcade window<br/>[ArcadeWindow.tsx]"]
  node_arcade_lobby["Arcade lobby<br/>[ArcadeLobby.tsx]"]
  node_games["Arcade games"]
  node_arcade_controls["Touch controls<br/>[ArcadeControls.tsx]"]
  node_scores["High-score store<br/>[arcade.ts]"]
end

subgraph group_shared["Shared services"]
  node_portfolio_content["Portfolio content<br/>[content.ts]"]
  node_command_defs["Command definitions<br/>[commands.ts]"]
  node_resume["Résumé download<br/>[resume.ts]"]
  node_audio["Sound preferences and audio<br/>[use-audio.ts]"]
  node_theme["Theme provider<br/>[theme-provider.tsx]"]
  node_analytics["Privacy-aware analytics<br/>[analytics.ts]"]
  node_pwa["Offline service worker<br/>[sw.js]"]
end

node_visitor(("Visitor"))
node_local_storage[("Browser local storage")]
node_analytics_endpoint["Analytics endpoint"]

node_visitor -->|"opens workspace"| node_shell
node_shell -->|"renders"| node_header
node_shell -->|"renders terminal"| node_terminal
node_shell -->|"renders editor"| node_standard
node_shell -->|"renders overlay"| node_arcade_window
node_terminal -->|"reads portfolio data"| node_portfolio_content
node_terminal -->|"dispatches commands"| node_command_defs
node_terminal -->|"downloads résumé"| node_resume
node_standard -->|"reads file data"| node_portfolio_content
node_standard -->|"renders editor"| node_editor_components
node_standard -->|"opens palette"| node_palette
node_standard -->|"opens search"| node_search
node_standard -->|"renders menubar"| node_menubar
node_standard -->|"opens settings"| node_settings
node_standard -->|"renders status"| node_status
node_search -->|"searches files"| node_portfolio_content
node_arcade_window -->|"renders lobby"| node_arcade_lobby
node_arcade_window -->|"loads selected game"| node_games
node_games -->|"uses controls"| node_arcade_controls
node_games -->|"reads and submits scores"| node_scores
node_arcade_lobby -.->|"shows leaderboards"| node_scores
node_scores -->|"persists scores"| node_local_storage
node_header -->|"uses sound settings"| node_audio
node_settings -->|"toggles sound"| node_audio
node_audio -->|"persists preference"| node_local_storage
node_header -->|"offers résumé"| node_resume
node_header -->|"uses theme"| node_theme
node_settings -->|"changes theme"| node_theme
node_shell -->|"tracks usage"| node_analytics
node_analytics -.->|"sends events"| node_analytics_endpoint
node_visitor -.->|"offline app support"| node_pwa

click node_shell "https://github.com/afnanlabs/afnan-workspace/blob/master/src/App.tsx"
click node_header "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/Header.tsx"
click node_terminal "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/TerminalView.tsx"
click node_portfolio_content "https://github.com/afnanlabs/afnan-workspace/blob/master/src/data/content.ts"
click node_command_defs "https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/commands.ts"
click node_resume "https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/resume.ts"
click node_standard "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/StandardView.tsx"
click node_editor_components "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/EditorComponents.tsx"
click node_palette "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/CommandPalette.tsx"
click node_search "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/SearchPanel.tsx"
click node_menubar "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/Menubar.tsx"
click node_settings "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/SettingsPanel.tsx"
click node_status "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/StatusBar.tsx"
click node_arcade_window "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeWindow.tsx"
click node_arcade_lobby "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeLobby.tsx"
click node_games "https://github.com/afnanlabs/afnan-workspace/tree/master/src/components/terminal"
click node_arcade_controls "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeControls.tsx"
click node_scores "https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/arcade.ts"
click node_audio "https://github.com/afnanlabs/afnan-workspace/blob/master/src/hooks/use-audio.ts"
click node_theme "https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/theme-provider.tsx"
click node_analytics "https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/analytics.ts"
click node_pwa "https://github.com/afnanlabs/afnan-workspace/blob/master/public/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_shell,node_header toneBlue
class node_terminal,node_local_storage toneAmber
class node_standard,node_editor_components,node_palette,node_search,node_menubar,node_settings,node_status toneMint
class node_arcade_window,node_arcade_lobby,node_games,node_arcade_controls,node_scores toneRose
class node_portfolio_content,node_command_defs,node_resume,node_audio,node_theme,node_analytics,node_pwa,node_visitor,node_analytics_endpoint toneIndigo
```

## Components

### Workspace shell

- [App shell](https://github.com/afnanlabs/afnan-workspace/blob/master/src/App.tsx): `src/App.tsx`
- [Workspace header](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/Header.tsx): `src/components/Header.tsx`

### Portfolio experiences

- [Terminal view](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/TerminalView.tsx): `src/components/terminal/TerminalView.tsx`

### Standard editor

- [Standard view](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/StandardView.tsx): `src/components/standard/StandardView.tsx`
- [Explorer and editor](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/EditorComponents.tsx): `src/components/standard/EditorComponents.tsx`
- [Command palette](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/CommandPalette.tsx): `src/components/standard/CommandPalette.tsx`
- [Workspace search](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/SearchPanel.tsx): `src/components/standard/SearchPanel.tsx`
- [Menubar](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/Menubar.tsx): `src/components/standard/Menubar.tsx`
- [Settings panel](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/SettingsPanel.tsx): `src/components/standard/SettingsPanel.tsx`
- [Status bar](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/standard/StatusBar.tsx): `src/components/standard/StatusBar.tsx`

### Arcade

- [Arcade window](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeWindow.tsx): `src/components/terminal/ArcadeWindow.tsx`
- [Arcade lobby](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeLobby.tsx): `src/components/terminal/ArcadeLobby.tsx`
- [Arcade games](https://github.com/afnanlabs/afnan-workspace/tree/master/src/components/terminal): `src/components/terminal`
- [Touch controls](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/terminal/ArcadeControls.tsx): `src/components/terminal/ArcadeControls.tsx`
- [High-score store](https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/arcade.ts): `src/lib/arcade.ts`

### Shared services

- [Portfolio content](https://github.com/afnanlabs/afnan-workspace/blob/master/src/data/content.ts): `src/data/content.ts`
- [Command definitions](https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/commands.ts): `src/lib/commands.ts`
- [Résumé download](https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/resume.ts): `src/lib/resume.ts`
- [Sound preferences and audio](https://github.com/afnanlabs/afnan-workspace/blob/master/src/hooks/use-audio.ts): `src/hooks/use-audio.ts`
- [Theme provider](https://github.com/afnanlabs/afnan-workspace/blob/master/src/components/theme-provider.tsx): `src/components/theme-provider.tsx`
- [Privacy-aware analytics](https://github.com/afnanlabs/afnan-workspace/blob/master/src/lib/analytics.ts): `src/lib/analytics.ts`
- [Offline service worker](https://github.com/afnanlabs/afnan-workspace/blob/master/public/sw.js): `public/sw.js`

### Other components

- **Visitor**
- **Browser local storage**
- **Analytics endpoint**

## Connections

- Visitor → App shell: opens workspace (evidence: `README.md`)
- App shell → Workspace header: renders (evidence: `src/App.tsx`)
- App shell → Terminal view: renders terminal (evidence: `src/App.tsx`)
- App shell → Standard view: renders editor (evidence: `src/App.tsx`)
- App shell → Arcade window: renders overlay (evidence: `src/App.tsx`)
- Terminal view → Portfolio content: reads portfolio data (evidence: `src/components/terminal/TerminalView.tsx`)
- Terminal view → Command definitions: dispatches commands (evidence: `src/components/terminal/TerminalView.tsx`)
- Terminal view → Résumé download: downloads résumé (evidence: `src/components/terminal/TerminalView.tsx`)
- Standard view → Portfolio content: reads file data (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Explorer and editor: renders editor (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Command palette: opens palette (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Workspace search: opens search (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Menubar: renders menubar (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Settings panel: opens settings (evidence: `src/components/standard/StandardView.tsx`)
- Standard view → Status bar: renders status (evidence: `src/components/standard/StandardView.tsx`)
- Workspace search → Portfolio content: searches files (evidence: `src/components/standard/SearchPanel.tsx`)
- Arcade window → Arcade lobby: renders lobby (evidence: `src/components/terminal/ArcadeWindow.tsx`)
- Arcade window → Arcade games: loads selected game (evidence: `src/components/terminal/ArcadeWindow.tsx`)
- Arcade games → Touch controls: uses controls (evidence: `src/components/terminal/PacmanGame.tsx`)
- Arcade games → High-score store: reads and submits scores (evidence: `src/components/terminal/PacmanGame.tsx`)
- Arcade lobby → High-score store: shows leaderboards (evidence: `README.md`)
- High-score store → Browser local storage: persists scores (evidence: `src/lib/arcade.ts`)
- Workspace header → Sound preferences and audio: uses sound settings (evidence: `src/components/Header.tsx`)
- Settings panel → Sound preferences and audio: toggles sound (evidence: `src/components/standard/SettingsPanel.tsx`)
- Sound preferences and audio → Browser local storage: persists preference (evidence: `src/hooks/use-audio.ts`)
- Workspace header → Résumé download: offers résumé (evidence: `src/components/Header.tsx`)
- Workspace header → Theme provider: uses theme (evidence: `src/components/Header.tsx`)
- Settings panel → Theme provider: changes theme (evidence: `src/components/standard/SettingsPanel.tsx`)
- App shell → Privacy-aware analytics: tracks usage (evidence: `src/App.tsx`)
- Privacy-aware analytics → Analytics endpoint: sends events (evidence: `README.md`)
- Visitor → Offline service worker: offline app support (evidence: `README.md`)