# ryanportfolio/wfm architecture

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

- Interactive diagram: https://gitdiagram.com/ryanportfolio/wfm
- Repository: https://github.com/ryanportfolio/wfm

## Overview

WFM Forecast & Staffing Workbench is a browser-only contact-center planning tool. Users load sample data or CSV, review data quality, forecast interval demand, validate forecasts with rolling-origin backtests, and translate demand into staffing or capacity plans; intraday tools compare observed demand and scheduled heads. Named projects preserve local working plans, and result views support CSV export. The README documents these capabilities; sampled source confirms the app’s loading and worker patterns, forecast orchestration, ensemble, and worker dispatch. Other feature wiring is shown only where supported by the product description and file tree.

Main entry points: [`src/App.tsx`](https://github.com/ryanportfolio/wfm/blob/main/src/App.tsx) (Workbench App), [`src/ui/workerClient.ts`](https://github.com/ryanportfolio/wfm/blob/main/src/ui/workerClient.ts) (Worker Client), [`src/engine/worker.ts`](https://github.com/ryanportfolio/wfm/blob/main/src/engine/worker.ts) (Compute Worker), [`src/ui/download.ts`](https://github.com/ryanportfolio/wfm/blob/main/src/ui/download.ts) (CSV Downloads)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Workbench UI"]
  node_app["Workbench App<br/>[App.tsx]"]
  node_csv["CSV Import<br/>[csv.ts]"]
  node_sample["Sample Data<br/>[sampleData.ts]"]
  node_data_ui["Data Review<br/>[DataTab.tsx]"]
  node_forecast_ui["Forecast View<br/>[ForecastTab.tsx]"]
  node_accuracy_ui["Accuracy View<br/>[AccuracyTab.tsx]"]
end

subgraph group_forecast["Forecasting"]
  node_clean["Clean History<br/>[clean.ts]"]
  node_forecast_pipeline["Forecast Pipeline"]
  node_ensemble["Forecast Ensemble<br/>[ensemble.ts]"]
  node_profiles["Interval Profiles<br/>[profiles.ts]"]
  node_backtest["Rolling Backtest<br/>[backtest.ts]"]
end

subgraph group_planning["Staffing Planning"]
  node_staff_ui["Staffing View<br/>[StaffingTab.tsx]"]
  node_capacity_ui["Capacity View<br/>[CapacityTab.tsx]"]
  node_intraday_ui["Intraday View<br/>[IntradayTab.tsx]"]
  node_staffing_engine["Staffing Scenarios<br/>[staffing.ts]"]
  node_erlang["Erlang Models<br/>[erlang.ts]"]
  node_capacity_engine["Capacity Planning<br/>[capacity.ts]"]
  node_intraday_engine["Intraday Calculation<br/>[intraday.ts]"]
end

subgraph group_compute["Compute Runtime"]
  node_worker_client["Worker Client<br/>[workerClient.ts]"]
  node_worker["Compute Worker<br/>[worker.ts]"]
end

subgraph group_workspace["Local Workspace"]
  node_projects["Project Files<br/>[project.ts]"]
  node_downloads["CSV Downloads<br/>[download.ts]"]
end

node_planner(("Planner"))
node_local_files["Local Files"]

node_planner -->|"uses"| node_app
node_app -->|"parses CSV"| node_csv
node_app -->|"loads sample"| node_sample
node_csv -->|"returns records"| node_app
node_sample -->|"returns records"| node_app
node_app -->|"shows data"| node_data_ui
node_app -->|"shows forecast"| node_forecast_ui
node_app -->|"shows scores"| node_accuracy_ui
node_app -->|"shows staffing"| node_staff_ui
node_app -->|"shows capacity"| node_capacity_ui
node_app -->|"shows intraday"| node_intraday_ui
node_app -->|"requests forecast"| node_worker_client
node_forecast_ui -->|"requests forecast"| node_worker_client
node_accuracy_ui -->|"requests backtest"| node_worker_client
node_staff_ui -->|"requests staffing"| node_worker_client
node_intraday_ui -->|"requests projection"| node_worker_client
node_worker_client -->|"posts jobs"| node_worker
node_worker -->|"runs forecast"| node_forecast_pipeline
node_worker -->|"runs backtest"| node_backtest
node_worker -->|"applies scenario"| node_staffing_engine
node_worker -->|"calculates projection"| node_intraday_engine
node_forecast_pipeline -->|"cleans history"| node_clean
node_forecast_pipeline -->|"fits and blends"| node_ensemble
node_forecast_pipeline -->|"intervalizes demand"| node_profiles
node_ensemble -->|"uses cleaned history"| node_clean
node_staffing_engine -->|"solves staffing"| node_erlang
node_intraday_engine -->|"projects service"| node_erlang
node_capacity_ui -->|"plans supply"| node_capacity_engine
node_planner -->|"opens or saves"| node_local_files
node_local_files -->|"provides project"| node_app
node_app -->|"validates or serializes"| node_projects
node_app -->|"downloads project"| node_local_files
node_forecast_ui -->|"exports results"| node_downloads
node_accuracy_ui -->|"exports scores"| node_downloads
node_staff_ui -->|"exports staffing"| node_downloads
node_capacity_ui -->|"exports plan"| node_downloads
node_intraday_ui -->|"exports results"| node_downloads

click node_app "https://github.com/ryanportfolio/wfm/blob/main/src/App.tsx"
click node_csv "https://github.com/ryanportfolio/wfm/blob/main/src/engine/csv.ts"
click node_sample "https://github.com/ryanportfolio/wfm/blob/main/src/engine/sampleData.ts"
click node_data_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/DataTab.tsx"
click node_forecast_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/ForecastTab.tsx"
click node_accuracy_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/AccuracyTab.tsx"
click node_staff_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/StaffingTab.tsx"
click node_capacity_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/CapacityTab.tsx"
click node_intraday_ui "https://github.com/ryanportfolio/wfm/blob/main/src/ui/IntradayTab.tsx"
click node_clean "https://github.com/ryanportfolio/wfm/blob/main/src/engine/clean.ts"
click node_forecast_pipeline "https://github.com/ryanportfolio/wfm/blob/main/src/engine/forecastPipeline.ts"
click node_ensemble "https://github.com/ryanportfolio/wfm/blob/main/src/engine/forecast/ensemble.ts"
click node_profiles "https://github.com/ryanportfolio/wfm/blob/main/src/engine/profiles.ts"
click node_backtest "https://github.com/ryanportfolio/wfm/blob/main/src/engine/backtest.ts"
click node_worker_client "https://github.com/ryanportfolio/wfm/blob/main/src/ui/workerClient.ts"
click node_worker "https://github.com/ryanportfolio/wfm/blob/main/src/engine/worker.ts"
click node_staffing_engine "https://github.com/ryanportfolio/wfm/blob/main/src/engine/staffing.ts"
click node_erlang "https://github.com/ryanportfolio/wfm/blob/main/src/engine/erlang.ts"
click node_capacity_engine "https://github.com/ryanportfolio/wfm/blob/main/src/engine/capacity.ts"
click node_intraday_engine "https://github.com/ryanportfolio/wfm/blob/main/src/engine/intraday.ts"
click node_projects "https://github.com/ryanportfolio/wfm/blob/main/src/ui/project.ts"
click node_downloads "https://github.com/ryanportfolio/wfm/blob/main/src/ui/download.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_app,node_csv,node_sample,node_data_ui,node_forecast_ui,node_accuracy_ui toneBlue
class node_clean,node_forecast_pipeline,node_ensemble,node_profiles,node_backtest toneAmber
class node_staff_ui,node_capacity_ui,node_intraday_ui,node_staffing_engine,node_erlang,node_capacity_engine,node_intraday_engine toneMint
class node_worker_client,node_worker toneRose
class node_projects,node_downloads,node_planner,node_local_files toneIndigo
```

## Components

### Workbench UI

- [Workbench App](https://github.com/ryanportfolio/wfm/blob/main/src/App.tsx): `src/App.tsx`
- [CSV Import](https://github.com/ryanportfolio/wfm/blob/main/src/engine/csv.ts): `src/engine/csv.ts`
- [Sample Data](https://github.com/ryanportfolio/wfm/blob/main/src/engine/sampleData.ts): `src/engine/sampleData.ts`
- [Data Review](https://github.com/ryanportfolio/wfm/blob/main/src/ui/DataTab.tsx): `src/ui/DataTab.tsx`
- [Forecast View](https://github.com/ryanportfolio/wfm/blob/main/src/ui/ForecastTab.tsx): `src/ui/ForecastTab.tsx`
- [Accuracy View](https://github.com/ryanportfolio/wfm/blob/main/src/ui/AccuracyTab.tsx): `src/ui/AccuracyTab.tsx`

### Forecasting

- [Clean History](https://github.com/ryanportfolio/wfm/blob/main/src/engine/clean.ts): `src/engine/clean.ts`
- [Forecast Pipeline](https://github.com/ryanportfolio/wfm/blob/main/src/engine/forecastPipeline.ts): `src/engine/forecastPipeline.ts`
- [Forecast Ensemble](https://github.com/ryanportfolio/wfm/blob/main/src/engine/forecast/ensemble.ts): `src/engine/forecast/ensemble.ts`
- [Interval Profiles](https://github.com/ryanportfolio/wfm/blob/main/src/engine/profiles.ts): `src/engine/profiles.ts`
- [Rolling Backtest](https://github.com/ryanportfolio/wfm/blob/main/src/engine/backtest.ts): `src/engine/backtest.ts`

### Staffing Planning

- [Staffing View](https://github.com/ryanportfolio/wfm/blob/main/src/ui/StaffingTab.tsx): `src/ui/StaffingTab.tsx`
- [Capacity View](https://github.com/ryanportfolio/wfm/blob/main/src/ui/CapacityTab.tsx): `src/ui/CapacityTab.tsx`
- [Intraday View](https://github.com/ryanportfolio/wfm/blob/main/src/ui/IntradayTab.tsx): `src/ui/IntradayTab.tsx`
- [Staffing Scenarios](https://github.com/ryanportfolio/wfm/blob/main/src/engine/staffing.ts): `src/engine/staffing.ts`
- [Erlang Models](https://github.com/ryanportfolio/wfm/blob/main/src/engine/erlang.ts): `src/engine/erlang.ts`
- [Capacity Planning](https://github.com/ryanportfolio/wfm/blob/main/src/engine/capacity.ts): `src/engine/capacity.ts`
- [Intraday Calculation](https://github.com/ryanportfolio/wfm/blob/main/src/engine/intraday.ts): `src/engine/intraday.ts`

### Compute Runtime

- [Worker Client](https://github.com/ryanportfolio/wfm/blob/main/src/ui/workerClient.ts): `src/ui/workerClient.ts`
- [Compute Worker](https://github.com/ryanportfolio/wfm/blob/main/src/engine/worker.ts): `src/engine/worker.ts`

### Local Workspace

- [Project Files](https://github.com/ryanportfolio/wfm/blob/main/src/ui/project.ts): `src/ui/project.ts`
- [CSV Downloads](https://github.com/ryanportfolio/wfm/blob/main/src/ui/download.ts): `src/ui/download.ts`

### Other components

- **Planner**
- **Local Files**

## Connections

- Planner → Workbench App: uses
- Workbench App → CSV Import: parses CSV
- Workbench App → Sample Data: loads sample
- CSV Import → Workbench App: returns records
- Sample Data → Workbench App: returns records
- Workbench App → Data Review: shows data
- Workbench App → Forecast View: shows forecast
- Workbench App → Accuracy View: shows scores
- Workbench App → Staffing View: shows staffing
- Workbench App → Capacity View: shows capacity
- Workbench App → Intraday View: shows intraday
- Workbench App → Worker Client: requests forecast
- Forecast View → Worker Client: requests forecast
- Accuracy View → Worker Client: requests backtest
- Staffing View → Worker Client: requests staffing
- Intraday View → Worker Client: requests projection
- Worker Client → Compute Worker: posts jobs
- Compute Worker → Forecast Pipeline: runs forecast
- Compute Worker → Rolling Backtest: runs backtest
- Compute Worker → Staffing Scenarios: applies scenario
- Compute Worker → Intraday Calculation: calculates projection
- Forecast Pipeline → Clean History: cleans history
- Forecast Pipeline → Forecast Ensemble: fits and blends
- Forecast Pipeline → Interval Profiles: intervalizes demand
- Forecast Ensemble → Clean History: uses cleaned history
- Staffing Scenarios → Erlang Models: solves staffing
- Intraday Calculation → Erlang Models: projects service
- Capacity View → Capacity Planning: plans supply
- Planner → Local Files: opens or saves
- Local Files → Workbench App: provides project
- Workbench App → Project Files: validates or serializes
- Workbench App → Local Files: downloads project
- Forecast View → CSV Downloads: exports results
- Accuracy View → CSV Downloads: exports scores
- Staffing View → CSV Downloads: exports staffing
- Capacity View → CSV Downloads: exports plan
- Intraday View → CSV Downloads: exports results