digraph mpr_architecture {
    rankdir=LR
    bgcolor="#0a0e17"
    fontname="Helvetica"
    node [fontname="Helvetica" fontsize=11 style=filled color="#1e2a4a" fontcolor="#e8eaf0" shape=box]
    edge [fontname="Helvetica" fontsize=9 fontcolor="#8892a8" color="#4a5568"]

    label="System Architecture"
    labelloc=t
    fontsize=16
    fontcolor="#0066ff"

    subgraph cluster_browser {
        label="Browser"
        style=dashed
        color="#1e2a4a"
        fontcolor="#8892a8"

        ui      [label="detection-app\n(Vue 3 + @vue-flow)" fillcolor="#121829"]
        wasm    [label="OpenCV WASM\n(edge / field stages)" fillcolor="#1a1a3a" fontcolor="#0066ff"]
        chunker [label="chunker UI\n(standalone test util)" fillcolor="#121829" fontcolor="#8892a8"]
    }

    subgraph cluster_k8s {
        label="K8s cluster (Kind in dev)"
        style=dashed
        color="#0066ff"
        fontcolor="#0066ff"

        gateway [label="Envoy Gateway\nport 8080" fillcolor="#0d1a33" shape=octagon]
        ui_pod  [label="detection-ui pod\n(Vite :5175)" fillcolor="#121829"]
        api     [label="FastAPI\n:8702 /detect/*" fillcolor="#121829"]

        subgraph cluster_data {
            label="Data plane"
            style=dashed
            color="#1e2a4a"
            fontcolor="#4a5568"

            pg     [label="PostgreSQL\njobs · profiles\ncheckpoints" fillcolor="#121829" shape=cylinder]
            redis  [label="Redis\n(SSE fan-out)" fillcolor="#121829" shape=cylinder]
            minio  [label="MinIO\nmedia · overlays" fillcolor="#121829" shape=cylinder]
        }
    }

    subgraph cluster_gpu {
        label="GPU host (LAN)"
        style=dashed
        color="#1e2a4a"
        fontcolor="#8892a8"

        gpu [label="inference server\nYOLO · OCR · VLM\nedge · field segmentation" fillcolor="#1a3a1a" fontcolor="#00c853" shape=box]
    }

    subgraph cluster_cloud {
        label="Cloud VLM providers"
        style=dashed
        color="#1e2a4a"
        fontcolor="#8892a8"

        cloud [label="Anthropic · Gemini\nOpenAI · Groq" fillcolor="#243056" shape=octagon]
    }

    ui      -> gateway   [label="HTTP / SSE"]
    chunker -> gateway   [label="HTTP"]
    ui      -> wasm      [label="worker" color="#0066ff"]
    gateway -> ui_pod    [label="/  /detection/*"]
    gateway -> api       [label="/api/*\n/api/detect/stream/*" color="#0066ff"]
    api     -> pg
    api     -> redis     [label="publish events" style=dotted]
    api     -> minio     [label="frames · overlays"]
    api     -> gpu       [label="HTTP\nINFERENCE_URL" color="#00c853"]
    api     -> cloud     [label="VLM escalation" style=dashed]
    redis   -> api       [label="SSE consumer" style=dashed color="#8892a8"]
}