// Developer productivity stack 2016-2026 — layer additions across two eras
digraph dev_productivity_stack {
    rankdir=LR;
    graph [bgcolor="white", fontname="Helvetica", fontsize=11,
           pad="0.3", nodesep="0.25", ranksep="0.55"];
    node  [shape=box, style="rounded,filled", fontname="Helvetica",
           fontsize=10, fillcolor="#f5f5f5", color="#888"];
    edge  [color="#aaa"];

    // Build-and-deploy era 2016-2020 — Tailwind sky/blue family
    subgraph cluster_build {
        label="build-and-deploy era 2016-2020";
        labeljust="l"; color="#0284c7"; fontcolor="#0284c7";
        style="rounded,dashed";

        e_2016 [label="editor\nLSP 1.0 (Microsoft, 2016)",
                color="#0284c7", fontcolor="#0284c7"];
        l_2017 [label="formatter\nPrettier 1.0 (Long, 2017)",
                color="#0284c7", fontcolor="#0284c7"];
        t_2017 [label="test runner\nJest mainstream (2017)\nplaywright not yet",
                color="#0284c7", fontcolor="#0284c7"];
        c_2019 [label="CI\nGitHub Actions GA (Nov 2019)",
                color="#0284c7", fontcolor="#0284c7"];
        d_2020 [label="deploy\nArgo CD / Flux (CNCF 2020)",
                color="#0284c7", fontcolor="#0284c7"];
    }

    // AI-assisted era 2021-2026 — Tailwind violet/fuchsia family
    subgraph cluster_ai {
        label="AI-assisted era 2021-2026";
        labeljust="l"; color="#7c3aed"; fontcolor="#7c3aed";
        style="rounded,dashed";

        e_2021 [label="editor + completion\nGitHub Copilot GA (Jun 2021)",
                color="#7c3aed", fontcolor="#7c3aed"];
        e_2023 [label="IDE fork\nCursor (Anysphere, 2023)",
                color="#7c3aed", fontcolor="#7c3aed"];
        e_2024 [label="terminal agent\nAider, Cline, Continue (2023-24)",
                color="#7c3aed", fontcolor="#7c3aed"];
        e_2025 [label="agentic coding\nClaude Code (Feb 2025)\nCodex CLI (Apr 2025)",
                color="#7c3aed", fontcolor="#7c3aed"];
        m_2021 [label="metrics\nSPACE framework (2021)\nDORA Accelerate matures",
                color="#db2777", fontcolor="#db2777",
                fillcolor="#fdf2f8"];
    }

    // Layer flow — left to right
    e_2016 -> l_2017 -> t_2017 -> c_2019 -> d_2020
             [label="layer adds", fontsize=9, color="#0284c7", fontcolor="#0284c7"];

    // Era bridge — build era hands off to AI era
    d_2020 -> e_2021 [label="era shift", style=dashed,
                      color="#7c3aed", fontcolor="#7c3aed"];

    // AI era progression
    e_2021 -> e_2023 -> e_2024 -> e_2025
             [label="agentic", fontsize=9,
              color="#7c3aed", fontcolor="#7c3aed"];

    // Metrics layer feeds back across both eras
    c_2019 -> m_2021 [style=dashed, color="#db2777",
                      label="DORA inputs", fontsize=9, fontcolor="#db2777"];
    e_2025 -> m_2021 [style=dashed, color="#db2777",
                      label="DX surveys", fontsize=9, fontcolor="#db2777"];
}