flowchart TD

    subgraph Source ["`**Observability Sources**`"]
    GH(GitHub Repository)
    end

    subgraph Edge ["`**Cloudflare Edge**`"]
    direction TB
    WH(Webhooker)
    D1[(D1 Metrics)]
    W(Fetch Worker)
    end

    subgraph UI ["`**Observability UI**`"]
    MON(Live Dashboard)
    end

    %% Connections (Optimized with precise engineering terms)
    GH -- "Verified Webhooks\n(HMAC-SHA256)" --> WH
    WH -- "Ingest & Transform\n(Raw to Metrics)" --> D1
    D1 -- "On-demand \nSnapshot Queries" --> W
    W  --> MON

    %% Styles
    style GH fill:#475569,stroke:#334155,stroke-width:2px,color:#ffffff

    style WH fill:#155e75,stroke:#164e63,stroke-width:2px,color:#ffffff
    style D1 fill:#0e7490,stroke:#155e75,stroke-width:2px,color:#ffffff
    style W fill:#155e75,stroke:#164e63,stroke-width:2px,color:#ffffff

    style MON fill:#166534,stroke:#14532d,stroke-width:2px,color:#ffffff

    style Source fill:none,stroke:#94a3b8,stroke-dasharray: 5 5
    style Edge fill:none,stroke:#94a3b8,stroke-dasharray: 5 5
    style UI fill:none,stroke:#94a3b8,stroke-dasharray: 5 5