# System Architecture

{% @mermaid/diagram content="graph TB
subgraph Frontend\["React Frontend"]
UI\[Landing Page & Dashboard]
RW\[Run Wizard]
RD\[Run Detail View]
RV\[Report Viewer]
end

```
subgraph Backend["Lovable Cloud Backend"]
    DB[(Supabase Database)]
    Auth[Authentication]
    EF[Edge Functions]
end

subgraph Compute["Modal External Compute"]
    PETRI[PETRI Engine]
    TOX[Detoxify Toxicity]
    BENCH[Benchmarks]
end

subgraph AI["AI Providers"]
    OAI[OpenAI]
    ANT[Anthropic]
    GGL[Google]
end

UI --> RW
RW --> EF
EF --> DB
EF --> PETRI
PETRI --> OAI
PETRI --> ANT
PETRI --> GGL
PETRI --> TOX
PETRI --> BENCH
PETRI --> EF
EF --> RD
RD --> RV
Auth --> DB
```

" fullWidth="true" %}