<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
{% include 'assets/force-graph.js' %}
</script>
<script language="javascript" type="text/javascript">
const __INLINE_DATA = {{graph}};
</script>
<style>
.main {
    width: 60%;
    margin: auto;

    flex-direction: column;
    display: flex;
}

.copy-btn {
    background-color: #e7e7e7;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 3px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 5px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
}

.copy-btn:hover {
    background-color: #d4d4d4;
}

.copy-btn:active {
    background-color: #c0c0c0;
}

.copy-btn svg {
    vertical-align: middle;
    pointer-events: none;
}

.copy-btn.copied .copy-icon-svg {
    display: none; /* Hide the copy icon */
}
.copy-btn.copied .check-icon-svg {
    display: inline-block !important;
    stroke: green;
}

.copy-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.cell-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.copy-text {
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Set font color to black for all table text */
table, th, td {
    color: black;
}

</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
</head>

<body>
<div class="main">
<div style="width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; align-self: stretch; position: relative; background: #0E1418;">
    <div style="transform: scale(1.5); display: flex; align-items: center; justify-content: center;">   
        {% include 'assets/cover.svg' %}
    </div>
</div>
    <div style="width:100%; background: white; flex-direction: column; justify-content: flex-start; margin-top: 20px; gap: 20px; align-items: flex-start; display: flex">
        <div style="width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
            <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; display: flex">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 20px">Scan Details</div>
                <hr style="width: 100%; margin: 0; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
            </div>
            <div style="width: 100%; align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: flex">
                <div style="align-self: stretch; background: white; border: 0.50px #D4D4D4 solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                    <div style="width: 100%; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="width: 100%; border-right: 0.50px #D4D4D4 solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="align-self: stretch; padding: 6px; background: #F5F5F5; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 60%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Project Name</div>
                            </div>
                            <div style="align-self: stretch; padding: 6px; background: #F5F5F5; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 60%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Scan Timestamp</div>
                            </div>
                            <div style="align-self: stretch; padding: 6px; background: #F5F5F5; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 60%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Agentic Framework</div>
                            </div>
                        </div>
                        <div style="width: 100%; border-right: 0.50px #D4D4D4 solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="align-self: stretch; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 40%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{project_name|e}}</div>
                            </div>
                            <div style="align-self: stretch; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 40%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{timestamp|e}}</div>
                            </div>
                            <div style="align-self: stretch; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
                                <div style="flex: 40%; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{framework|e}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%; margin-top: 20px; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
            <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; display: flex">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 20px; word-wrap: break-word">Dependency Check</div>
                <hr style="width: 100%; margin: 0; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
            </div>
            <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; display: flex">
                        <div style="align-self:stretch; color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Agentic Workflow Graph</div>
                    </div>
                    <div style="align-self: stretch; padding: 12px; background: #F5F5F5; border: 0.50px #C3C3C3 solid; flex-direction: column; justify-content: center; align-items: flex-end; gap: 12px; display: flex">
                        <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
                            <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 500; line-height: 12px; word-wrap: break-word">Legend</div>
                            <div style="justify-content: flex-start; align-items: center; gap: 32px; display: inline-flex">
                                <div style="height: 24px; justify-content: flex-start; align-items: center; gap: 4px; display: flex">
                                    <div data-svg-wrapper style="position: relative">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_4850_35822)">
                                    <path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12Z" fill="#164EAF"/>
                                    <path d="M12 7V8M10.5 12V16.5M13.5 12V16.5M8.5 14L10.5 13M13.5 13L15.5 14M10.5 15H13.5M11 10V10.005M13 10V10.005M9 9C9 8.73478 9.10536 8.48043 9.29289 8.29289C9.48043 8.10536 9.73478 8 10 8H14C14.2652 8 14.5196 8.10536 14.7071 8.29289C14.8946 8.48043 15 8.73478 15 9V11C15 11.2652 14.8946 11.5196 14.7071 11.7071C14.5196 11.8946 14.2652 12 14 12H10C9.73478 12 9.48043 11.8946 9.29289 11.7071C9.10536 11.5196 9 11.2652 9 11V9Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_4850_35822">
                                    <rect width="24" height="24" fill="white"/>
                                    </clipPath>
                                    </defs>
                                    </svg>
                                    </div>
                                    <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Agent</div>
                                </div>
                                <div style="height: 24px; justify-content: flex-start; align-items: center; gap: 4px; display: flex">
                                    <div data-svg-wrapper>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="4" fill="#A738D6"/>
                                    <path d="M9.9281 10.9999H11.4281V9.49993L9.6781 7.74993C10.2379 7.48256 10.8669 7.39533 11.4783 7.50024C12.0898 7.60515 12.6536 7.89704 13.0923 8.33571C13.531 8.77439 13.8229 9.33828 13.9278 9.94973C14.0327 10.5612 13.9455 11.1901 13.6781 11.7499L16.6781 14.7499C16.877 14.9488 16.9888 15.2186 16.9888 15.4999C16.9888 15.7812 16.877 16.051 16.6781 16.2499C16.4792 16.4488 16.2094 16.5606 15.9281 16.5606C15.6468 16.5606 15.377 16.4488 15.1781 16.2499L12.1781 13.2499C11.6183 13.5173 10.9894 13.6045 10.3779 13.4996C9.76646 13.3947 9.20257 13.1028 8.76389 12.6641C8.32521 12.2255 8.03332 11.6616 7.92842 11.0501C7.82351 10.4387 7.91074 9.80974 8.1781 9.24993L9.9281 10.9999Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    </div>
                                    <div style="flex-direction: column; justify-content: center; align-items: flex-start; display: inline-flex">
                                        <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 600; line-height: 11.20px; word-wrap: break-word">Tool</div>
                                        <div style="text-align: justify; color: black; font-size: 6px; font-family: Inter; font-weight: 500; line-height: 8.40px; word-wrap: break-word">Tool Category</div>
                                    </div>
                                </div>
                                <div style="height: 24px; justify-content: flex-start; align-items: center; gap: 4px; display: flex">
                                    <div data-svg-wrapper>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#F5DDFF"/>
                                    <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="#A738D6" stroke-dasharray="2 2"/>
                                    <path d="M9.3562 10.9999H10.8562V9.49993L9.1062 7.74993C9.66602 7.48256 10.295 7.39533 10.9064 7.50024C11.5178 7.60515 12.0817 7.89704 12.5204 8.33571C12.9591 8.77439 13.251 9.33828 13.3559 9.94973C13.4608 10.5612 13.3736 11.1901 13.1062 11.7499L16.1062 14.7499C16.3051 14.9488 16.4169 15.2186 16.4169 15.4999C16.4169 15.7812 16.3051 16.051 16.1062 16.2499C15.9073 16.4488 15.6375 16.5606 15.3562 16.5606C15.0749 16.5606 14.8051 16.4488 14.6062 16.2499L11.6062 13.2499C11.0464 13.5173 10.4175 13.6045 9.806 13.4996C9.19455 13.3947 8.63066 13.1028 8.19199 12.6641C7.75331 12.2255 7.46142 11.6616 7.35651 11.0501C7.2516 10.4387 7.33884 9.80974 7.6062 9.24993L9.3562 10.9999Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    </div>
                                    <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">CustomTool</div>
                                </div>
                                <div style="height: 28.28px; justify-content: flex-start; align-items: center; gap: 4px; display: flex">
                                    <div data-svg-wrapper>
                                    <svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_4850_35482)">
                                    <rect x="14.1421" y="0.85791" width="20" height="20" rx="4" transform="rotate(45 14.1421 0.85791)" fill="#009C92"/>
                                    <g clip-path="url(#clip1_4850_35482)">
                                    <path d="M16.2635 12.8786L17.3241 11.818M17.1473 14.9999L18.6676 14.9999M16.2635 17.1213L17.3241 18.1819M14.1421 18.0052V19.5254M12.0208 17.1213L10.9602 18.1819M11.1369 14.9999L9.61665 14.9999M12.0208 12.8786L10.9602 11.818M14.1421 11.9947V10.4745" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_4850_35482">
                                    <rect x="14.1421" y="0.85791" width="20" height="20" rx="4" transform="rotate(45 14.1421 0.85791)" fill="white"/>
                                    </clipPath>
                                    <clipPath id="clip1_4850_35482">
                                    <rect width="12" height="12" fill="white" transform="translate(14.1421 6.51465) rotate(45)"/>
                                    </clipPath>
                                    </defs>
                                    </svg>
                                    </div>
                                    <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Basic</div>
                                </div>
                                <div style="height: 24px; justify-content: flex-start; align-items: center; gap: 4px; display: flex">
                                    <div data-svg-wrapper>
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="4" fill="#FFDD00"/>
                                    <g clip-path="url(#clip0_5798_38164)">
                                    <path d="M14.1363 3.01758C14.1531 3.02925 14.1598 3.04904 14.1704 3.05141C14.5728 3.14116 14.9416 3.30574 15.2787 3.54292C15.655 3.80761 15.9668 4.13138 16.2018 4.5288C16.3938 4.85362 16.5297 5.20145 16.5826 5.57269C16.6201 5.83557 16.6127 6.10502 16.6217 6.37166C16.6234 6.42174 16.6079 6.4724 16.6014 6.51556C16.7039 6.51556 16.7977 6.51367 16.8913 6.51597C17.0658 6.52025 17.2419 6.51369 17.4141 6.53613C17.6158 6.56241 17.8156 6.60838 18.0134 6.65752C18.2643 6.71985 18.4932 6.83719 18.7164 6.96531C19.0309 7.1458 19.2905 7.39318 19.5294 7.65964C19.7673 7.92515 19.9495 8.23099 20.0663 8.56925C20.137 8.7741 20.2058 8.98351 20.2385 9.19654C20.2746 9.43153 20.2936 9.66993 20.2666 9.91267C20.2368 10.1801 20.1926 10.4413 20.1041 10.6949C19.9835 11.0402 19.8242 11.3682 19.5745 11.6363C19.22 12.0169 18.8478 12.3811 18.4817 12.7508C18.4021 12.8312 18.3143 12.9033 18.2337 12.9828C17.7172 13.4921 17.202 14.0028 16.6856 14.5122C16.386 14.8076 16.0849 15.1015 15.7845 15.3961C15.4821 15.6927 15.1795 15.9893 14.8771 16.286C14.5746 16.5826 14.2722 16.8793 13.9697 17.1759C13.6693 17.4705 13.3693 17.7655 13.0681 18.0593C12.9913 18.1342 12.9088 18.2033 12.8325 18.2786C12.7268 18.3828 12.728 18.5037 12.8349 18.6092C13.1928 18.9623 13.5519 19.3142 13.9101 19.667C14.0149 19.7702 14.1248 19.8692 14.2208 19.9802C14.387 20.1722 14.3746 20.5389 14.2103 20.7334C14.0645 20.906 13.8811 20.9904 13.6573 20.9814C13.4962 20.9749 13.3518 20.9153 13.2365 20.8024C12.7893 20.3646 12.3459 19.923 11.8989 19.4851C11.7685 19.3573 11.6586 19.2155 11.5874 19.048C11.4822 18.8006 11.433 18.5464 11.4686 18.2726C11.5045 17.9967 11.6034 17.7543 11.7717 17.5368C11.7875 17.5163 11.8041 17.4962 11.8224 17.4779C12.0582 17.2414 12.2933 17.0042 12.5309 16.7695C12.8426 16.4614 13.1563 16.1552 13.4693 15.8484C13.7426 15.5805 14.0164 15.3132 14.2895 15.0453C14.6259 14.7153 14.9615 14.3845 15.2982 14.0548C15.515 13.8424 15.7338 13.632 15.9504 13.4193C16.3343 13.0425 16.7169 12.6644 17.1005 12.2873C17.4047 11.9882 17.709 11.6893 18.0143 11.3913C18.154 11.255 18.3 11.125 18.436 10.9852C18.7254 10.6878 18.9105 10.3382 18.9618 9.92091C19.0269 9.39158 18.8929 8.92352 18.5566 8.50886C18.2712 8.15694 17.9077 7.92924 17.4725 7.82136C17.2447 7.76492 17.0102 7.76874 16.7752 7.79666C16.4212 7.83871 16.1146 7.98603 15.8333 8.19457C15.7662 8.24429 15.7061 8.30409 15.6466 8.36313C15.397 8.61078 15.1501 8.86103 14.9001 9.10819C14.5822 9.42252 14.2622 9.73483 13.9431 10.0479C13.6469 10.3385 13.3506 10.6289 13.0544 10.9194C12.7415 11.2263 12.4286 11.5333 12.1157 11.8402C11.8153 12.1348 11.5149 12.4293 11.2145 12.7239C10.9058 13.0267 10.5964 13.3289 10.2886 13.6326C10.043 13.8749 9.73211 13.9159 9.45742 13.7689C9.09264 13.5737 9.02687 13.0867 9.30381 12.7906C9.45381 12.6303 9.61264 12.4781 9.76915 12.3239C10.073 12.0245 10.3781 11.7262 10.6826 11.4275C10.9872 11.1288 11.2917 10.8301 11.5963 10.5314C11.903 10.2307 12.2097 9.92999 12.5164 9.62927C12.8168 9.3347 13.1172 9.04016 13.4176 8.74556C13.7263 8.44275 14.0345 8.1394 14.3439 7.83724C14.494 7.69063 14.6507 7.55048 14.7965 7.39982C15.0678 7.11952 15.2395 6.78926 15.3073 6.40021C15.3986 5.87648 15.268 5.40585 14.9599 4.99221C14.6797 4.616 14.2998 4.36613 13.8276 4.28434C13.6669 4.25652 13.5018 4.22579 13.3408 4.23482C12.939 4.25736 12.5698 4.38636 12.251 4.63985C12.1854 4.69197 12.1241 4.74987 12.0642 4.80854C11.7113 5.15417 11.3596 5.50102 11.0071 5.84706C10.7256 6.12333 10.4435 6.39889 10.1619 6.67502C9.84064 6.99012 9.51967 7.30556 9.19844 7.62073C8.89811 7.91539 8.5976 8.20986 8.29723 8.50446C7.98849 8.80727 7.67982 9.11015 7.37111 9.41298C7.06867 9.70966 6.76622 10.0063 6.46375 10.303C6.1571 10.6038 5.85071 10.9048 5.54367 11.2051C5.32248 11.4215 5.10237 11.639 4.87826 11.8523C4.5992 12.1179 4.19348 12.1136 3.9366 11.8514C3.68652 11.5961 3.69371 11.2199 3.93871 10.9685C4.3018 10.596 4.67811 10.2363 5.0495 9.87188C5.28289 9.64286 5.51812 9.41571 5.75152 9.18669C6.12083 8.82431 6.48905 8.46083 6.85817 8.09826C7.14161 7.81985 7.42584 7.54226 7.70948 7.26405C8.03494 6.94483 8.36005 6.62524 8.68547 6.30597C8.97954 6.01748 9.27387 5.72927 9.568 5.44085C9.87676 5.13806 10.1852 4.8349 10.4942 4.53241C10.7279 4.30369 10.9577 4.07076 11.1979 3.84903C11.4031 3.6596 11.6262 3.49244 11.8749 3.36038C12.1407 3.2193 12.4163 3.10865 12.7117 3.04881C12.7192 3.0473 12.7248 3.03635 12.726 3.02369C13.1898 3.01758 13.6589 3.01758 14.1363 3.01758Z" fill="black"/>
                                    <path d="M15.1333 12.4087C14.9466 12.5954 14.7654 12.7787 14.5819 12.9597C14.2533 13.284 13.9234 13.607 13.5939 13.9304C13.2916 14.2271 12.9895 14.5241 12.6866 14.8202C12.4905 15.0118 12.2991 15.209 12.0948 15.3915C11.7005 15.7435 11.2542 16.0026 10.736 16.1336C10.49 16.1958 10.2437 16.2288 9.99037 16.239C9.52785 16.2575 9.08469 16.1757 8.65822 16.0055C8.35671 15.8852 8.08251 15.7151 7.83207 15.5062C7.53973 15.2623 7.28999 14.9819 7.10397 14.6504C6.94326 14.3639 6.81035 14.0628 6.76363 13.7342C6.73013 13.4985 6.69378 13.2599 6.69627 13.0231C6.70015 12.6546 6.77928 12.2962 6.91887 11.9524C7.08792 11.5361 7.3345 11.1744 7.65924 10.8636C7.86233 10.6692 8.05666 10.4657 8.25678 10.2681C8.58117 9.94791 8.90686 9.62901 9.23244 9.31C9.48062 9.06684 9.72992 8.82482 9.97792 8.58148C10.3388 8.22736 10.6988 7.87229 11.0595 7.51804C11.3409 7.24177 11.623 6.9663 11.9045 6.69019C12.232 6.36896 12.557 6.04507 12.8878 5.72733C12.9955 5.62387 13.109 5.52615 13.2636 5.48683C13.6549 5.38728 14.0676 5.66502 14.0751 6.084C14.0786 6.27617 14.0086 6.43332 13.8743 6.56656C13.7058 6.73365 13.5397 6.90302 13.3707 7.06956C13.0711 7.36484 12.77 7.6587 12.4697 7.95322C12.1672 8.24979 11.8648 8.54645 11.5624 8.84304C11.262 9.13757 10.9616 9.43204 10.6613 9.72658C10.3567 10.0252 10.0522 10.3239 9.74771 10.6226C9.4432 10.9212 9.14358 11.2251 8.8324 11.5167C8.63406 11.7025 8.43754 11.8865 8.28668 12.1155C8.1325 12.3494 8.04679 12.6048 8.00808 12.8811C7.97065 13.1482 7.99905 13.4063 8.07847 13.6616C8.17821 13.9822 8.35467 14.2552 8.60182 14.4796C8.87649 14.7289 9.20149 14.8899 9.56609 14.95C9.97648 15.0177 10.3801 14.9689 10.7509 14.7734C10.9176 14.6854 11.0757 14.5699 11.2141 14.4415C11.5396 14.1395 11.8506 13.8221 12.1678 13.5113C12.4202 13.2641 12.6736 13.0178 12.9258 12.7704C13.2825 12.4204 13.6383 12.0695 13.9949 11.7194C14.2721 11.4472 14.5502 11.1759 14.8275 10.9039C15.1591 10.5786 15.4902 10.2526 15.822 9.9274C16.066 9.6883 16.3115 9.45084 16.5549 9.21119C16.8998 8.87164 17.4247 8.98565 17.6145 9.34437C17.7373 9.57647 17.698 9.89897 17.5055 10.089C17.104 10.4853 16.7022 10.8813 16.2999 11.277C16.0042 11.5678 15.7081 11.8584 15.4112 12.148C15.3217 12.2352 15.2289 12.319 15.1333 12.4087Z" fill="black"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_5798_38164">
                                    <rect width="18" height="18" fill="white" transform="translate(3 3)"/>
                                    </clipPath>
                                    </defs>
                                    </svg>
                                    </div>
                                    <div style="text-align: justify; color: black; font-size: 8px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">MCP Server</div>
                                </div>
                            </div>
                        </div>
                        <div style="align-self: stretch; height: 0px; border: 0.50px #C3C3C3 solid"></div>
                        <div data-svg-wrapper style="width: 100%; position: relative">
                            <div id="graph" style="width:100%; height: 600px; position: relative"></div>
                        </div>
                    </div>
                </div>
                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; display: flex">
                        <div style="align-self: stretch; justify-content: center; align-items: center; display: inline-flex">
                            <div style="flex: 1 1 0; color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Findings</div>
                        </div>
                        <div style="align-self: stretch; color: #777777; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word"></div>
                    </div>
                    <div style="align-self: stretch; border: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="flex: 1 1 0; height: 64px; padding: 12px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 10px; display: flex">
                            <div data-svg-wrapper>
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="40" height="40" rx="20" fill="url(#paint0_linear_4895_70604)"/>
                            <path d="M11 20C11 21.1819 11.2328 22.3522 11.6851 23.4442C12.1374 24.5361 12.8003 25.5282 13.636 26.364C14.4718 27.1997 15.4639 27.8626 16.5558 28.3149C17.6478 28.7672 18.8181 29 20 29M11 20C11 18.8181 11.2328 17.6478 11.6851 16.5558C12.1374 15.4639 12.8003 14.4718 13.636 13.636C14.4718 12.8003 15.4639 12.1374 16.5558 11.6851C17.6478 11.2328 18.8181 11 20 11M11 20H15M20 29C21.1819 29 22.3522 28.7672 23.4442 28.3149C24.5361 27.8626 25.5282 27.1997 26.364 26.364C27.1997 25.5282 27.8626 24.5361 28.3149 23.4442C28.7672 22.3522 29 21.1819 29 20M20 29V26M29 20C29 18.8181 28.7672 17.6478 28.3149 16.5558C27.8626 15.4639 27.1997 14.4718 26.364 13.636C25.5282 12.8003 24.5361 12.1374 23.4442 11.6851C22.3522 11.2328 21.1819 11 20 11M29 20H26M20 11V15M20 20V20.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <defs>
                            <linearGradient id="paint0_linear_4895_70604" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                                <stop offset="0.1132" stop-color="#2AF5D8"/>
                                <stop offset="0.5041" stop-color="#2A90F4"/>
                                <stop offset="0.8876" stop-color="#9281FF"/>
                            </linearGradient>
                            </defs>
                            </svg>
                            </div>
                            <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex">
                                <div style="text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 500; line-height: 15px; word-wrap: break-word">Vulnerabilities</div>
                                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 600; line-height: 20px; word-wrap: break-word">{{count["vulnerability"]}}</div>
                            </div>
                        </div>
                        <div style="flex: 1 1 0; height: 64px; padding: 12px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 10px; display: flex">
                            <div data-svg-wrapper>
                            <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="0.666672" width="40" height="40" rx="20" fill="url(#paint0_linear_4895_70615)"/>
                            <path d="M20.6667 10V12M17.6667 20V29M23.6667 20V29M13.6667 24L17.6667 22M23.6667 22L27.6667 24M17.6667 26H23.6667M18.6667 16V16.01M22.6667 16V16.01M14.6667 14C14.6667 13.4696 14.8774 12.9609 15.2525 12.5858C15.6275 12.2107 16.1362 12 16.6667 12H24.6667C25.1971 12 25.7058 12.2107 26.0809 12.5858C26.456 12.9609 26.6667 13.4696 26.6667 14V18C26.6667 18.5304 26.456 19.0391 26.0809 19.4142C25.7058 19.7893 25.1971 20 24.6667 20H16.6667C16.1362 20 15.6275 19.7893 15.2525 19.4142C14.8774 19.0391 14.6667 18.5304 14.6667 18V14Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <defs>
                            <linearGradient id="paint0_linear_4895_70615" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                                <stop offset="0.1132" stop-color="#2AF5D8"/>
                                <stop offset="0.5041" stop-color="#2A90F4"/>
                                <stop offset="0.8876" stop-color="#9281FF"/>
                            </linearGradient>
                            </defs>
                            </svg>
                            </div>
                            <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex">
                                <div style="text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 500; line-height: 15px; word-wrap: break-word">Agents</div>
                                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 600; line-height: 20px; word-wrap: break-word">{{count["agents"]}}</div>
                            </div>
                        </div>
                        <div style="flex: 1 1 0; height: 64px; padding: 12px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: center; gap: 10px; display: flex">
                            <div data-svg-wrapper>
                            <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="0.333313" width="40" height="40" rx="20" fill="url(#paint0_linear_4895_70620)"/>
                            <path d="M15.3333 18H18.3333V15L14.8333 11.5C15.9529 10.9652 17.2108 10.7908 18.4337 11.0006C19.6566 11.2104 20.7844 11.7942 21.6617 12.6715C22.5391 13.5489 23.1229 14.6767 23.3327 15.8996C23.5425 17.1225 23.368 18.3803 22.8333 19.5L28.8333 25.5C29.2311 25.8978 29.4546 26.4374 29.4546 27C29.4546 27.5626 29.2311 28.1022 28.8333 28.5C28.4355 28.8978 27.8959 29.1213 27.3333 29.1213C26.7707 29.1213 26.2311 28.8978 25.8333 28.5L19.8333 22.5C18.7137 23.0347 17.4558 23.2092 16.2329 22.9994C15.01 22.7895 13.8822 22.2058 13.0049 21.3284C12.1275 20.451 11.5438 19.3233 11.3339 18.1004C11.1241 16.8775 11.2986 15.6196 11.8333 14.5L15.3333 18Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <defs>
                            <linearGradient id="paint0_linear_4895_70620" x1="0%" y1="100%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                                <stop offset="0.1132" stop-color="#2AF5D8"/>
                                <stop offset="0.5041" stop-color="#2A90F4"/>
                                <stop offset="0.8876" stop-color="#9281FF"/>
                            </linearGradient>
                            </defs>
                            </svg>
                            </div>
                            <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: inline-flex">
                                <div style="text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 500; line-height: 15px; word-wrap: break-word">Tools</div>
                                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 600; line-height: 20px; word-wrap: break-word">{{count["tools"]}}</div>
                            </div>
                        </div>
                    </div>
                </div>
        <div style="margin-top: 20px; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
            <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; display: flex">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 20px; word-wrap: break-word">Nodes Overview</div>
                <hr style="width: 100%; margin: 0; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
                </div>
            </div>
        </div>
            {% if agents %}
              <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; display: flex">
                        <div style="width: 100%; color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Agents</div>
                    </div>
                    <table style="align-self: stretch; width: 100%; border-top: 0.50px #D4D4D4 solid; border-left: 0.50px #D4D4D4 solid; border-right: 0.50px #D4D4D4 solid;border-spacing:0">
                        <tr style="background: #F5F5F5; font-family: Inter; font-weight:600; font-size:8px; border-bottom: 0.5px solid #D4D4D4; text-align: left; line-height: 150%; padding: 6px; gap: 12px">
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Agent Name</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">LLM Model</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">System Prompt</th>
                            {% if hardened_prompts|length > 0 %}
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Hardened System Prompt</th>
                            {% endif %}
                        </tr>
                        {% for agent in agents %}
                        <tr style="font-family: Inter; font-weight: 400; font-size:8px; text-align: justify; line-height: 150%">
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{agent.name|e}}</td>
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{agent.llm|e}}</td>
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; text-align: left;">{{agent.system_prompt|e}}</td>
                            {% if hardened_prompts|length > 0 %}
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">
                                <div class="cell-content-wrapper">
                                    <span class="copy-text">{{hardened_prompts.get(agent.name, agent.system_prompt)|e}}</span>
                                    <button class="copy-btn" data-copy-value="{{hardened_prompts.get(agent.name, agent.system_prompt)|e}}" title="Copy">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="copy-icon-svg">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="check-icon-svg" style="display: none;"> <!-- Initially hidden, green stroke -->
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                            {% endif %}
                        {% endfor %}
                    </table>
                </div>
            {% endif %}

                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; display: flex">
                        <div style="width: 100%; color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">Tools</div>
                    </div>
                    <table style="align-self: stretch; width: 100%; border-top: 0.50px #D4D4D4 solid; border-left: 0.50px #D4D4D4 solid; border-right: 0.50px #D4D4D4 solid;border-spacing:0">
                        <tr style="background: #F5F5F5; font-family: Inter; font-weight:600; font-size:8px; border-bottom: 0.5px solid #D4D4D4; text-align: left; line-height: 150%; padding: 6px; gap: 12px">
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Tool Name</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Tool Category</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Tool Description</th>
                            <th style="padding: 3.5px; border-bottom: 0.50px #D4D4D4 solid;">Number of Vulnerabilities</th>
                        </tr>
                        {% for tool in tools %}
                        <tr style="font-family: Inter; font-weight: 400; font-size:8px; text-align: justify; line-height: 150%">
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{tool.name|e}}</td>
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{tool.category|e}}</td>
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{tool.description|e}}</td>
                            <td style="padding: 3.5px; border-bottom: 0.50px #D4D4D4 solid;">{{tool.vulnerabilities | length}}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            {% if mcp_servers %}
                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; display: flex">
                        <div style="width: 100%; color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">MCP Servers</div>
                    </div>
                    <table style="align-self: stretch; width: 100%; border-top: 0.50px #D4D4D4 solid; border-left: 0.50px #D4D4D4 solid; border-right: 0.50px #D4D4D4 solid;border-spacing:0">
                        <tr style="background: #F5F5F5; font-family: Inter; font-weight:600; font-size:8px; border-bottom: 0.5px solid #D4D4D4; text-align: left; line-height: 150%; padding: 6px; gap: 12px">
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Name</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid;border-bottom: 0.50px #D4D4D4 solid;">Parameters</th>
                        </tr>
                        {% for mcp_server in mcp_servers %}
                        <tr style="font-family: Inter; font-weight: 400; font-size:8px; text-align: justify; line-height: 150%">
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{mcp_server.name|e}}</td>
                            <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{mcp_server.description|safe}}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            {% endif %}
        {% if tools | map(attribute='vulnerabilities') | map('length') | sum > 0 %}
        <div style="margin-top: 20px; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: flex">
            <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; display: flex">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 20px; word-wrap: break-word">Tool Vulnerabilities</div>
                <hr style="width: 100%; margin: 0; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
                {% for tool in tools %}
                {% if tool.vulnerabilities|length > 0 %}
                <div style="width: 100%; margin-top:20px; flex-direction: column; justify-content: center; align-items: center; gap: 20px; display: inline-flex">
                    <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: flex">
                        <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 4px; display: inline-flex">
                            <div style="color: black; font-size: 12px; font-family: Inter; font-weight: 600; line-height: 12px; word-wrap: break-word">{{tool.name|e}}</div>
                        </div>
                        {% for v in tool.vulnerabilities %}
                        <div style="width:100%; align-self: stretch; border: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="flex: 1 1 0; border-right: 0.50px #D4D4D4 solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                                <div style="width: 100%; align-self: stretch; justify-content: flex-start; align-items: center; display: inline-flex">
                                    <div style="flex: 40%; padding: 6px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Vulnerability</div>
                                    </div>
                                    <div style="flex: 60%; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word"><b>{{v.name|e}}</b></div>
                                    </div>
                                </div>
                                <div style="align-self: stretch; justify-content: flex-start; align-items: center; display: inline-flex">
                                    <div style="flex: 40%; align-self: stretch; padding: 6px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Description</div>
                                    </div>
                                    <div style="flex: 60%; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{v.description|e}}</div>
                                    </div>
                                </div>
                                <div style="align-self: stretch; justify-content: flex-start; align-items: center; display: inline-flex">
                                    <div style="flex: 40%; align-self: stretch; padding: 6px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Security Framework Mapping</div>
                                    </div>
                                    <div style="flex: 60%; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
                                        {% for key, value in v.security_framework_mapping.items() %}
                                        <div style="text-align: justify"><span style="color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word"><b>{{key}}:</b></span></br><span style="color: black; white-space: pre-wrap; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{value|safe}}</span></div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div style="align-self: stretch; justify-content: flex-start; align-items: center; display: inline-flex">
                                    <div style="flex: 40%; align-self: stretch; padding: 6px; background: #F5F5F5; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; color: black; font-size: 10px; font-family: Inter; font-weight: 600; line-height: 15px; word-wrap: break-word">Remediation Steps</div>
                                    </div>
                                    <div style="flex: 60%; padding: 6px; border-bottom: 0.50px #D4D4D4 solid; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
                                        <div style="flex: 1 1 0; text-align: justify; white-space: pre-wrap; color: black; font-size: 10px; font-family: Inter; font-weight: 400; line-height: 15px; word-wrap: break-word">{{v.remediation|e}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
            {% set non_guardrail_agents = agents | selectattr("is_guardrail", "equalto", False) | list %}
            {% if non_guardrail_agents | map(attribute='vulnerabilities') | map('length') | sum > 0 %}
            <div style="margin-top: 20px; align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; display: flex">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 20px;">Agent Vulnerability Mitigations</div>
                <hr style="width: 100%; margin: 0; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
                    <table style="align-self: stretch; width: 100%; border-top: 0.50px #D4D4D4 solid; border-left: 0.50px #D4D4D4 solid; border-right: 0.50px #D4D4D4 solid; border-spacing:0">
                        <tr style="background: #F5F5F5; font-family: Inter; font-weight:600; font-size:8px; border-bottom: 0.5px solid #D4D4D4; text-align: left; line-height: 150%; padding: 6px; gap: 12px">
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">Agent Name</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">Vulnerability</th>
                            <th style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">Mitigation Level*</th>
                            <th style="padding: 3.5px; border-bottom: 0.50px #D4D4D4 solid;">Explanation</th>
                        </tr>
                        {% for agent in non_guardrail_agents %}
                            {% set num_vulns = agent.vulnerabilities | length %}
                            {% for v in agent.vulnerabilities %}
                            <tr style="font-family: Inter; font-weight: 400; font-size:8px; text-align: justify; line-height: 150%">
                                {% if loop.first %}
                                <td rowspan="{{num_vulns}}" style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; vertical-align: top">{{ agent.name|e }}</td>
                                {% endif %}
                                <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid;">{{ v.name|e }}</td>
                                {% set color = 'green' if v.mitigation_level == 'Full' else 'orange' if v.mitigation_level == 'Partial' else 'red' %}
                                <td style="padding: 3.5px; border-right: 0.50px #D4D4D4 solid; border-bottom: 0.50px #D4D4D4 solid; color: {{ color }}">{{ v.mitigation_level|e }}</td>
                                <td style="padding: 3.5px; border-bottom: 0.50px #D4D4D4 solid;">
                                    {{ (v.guardrail_explanation ~ ' ' ~ v.instruction_explanation)|e }}
                                </td>
                            </tr>
                            {% endfor %}
                        {% endfor %}
                    </table>
                <div style="margin-top: 8px; font-size: 10px; font-family: Inter; color: #555;">
                    <strong>*The "Mitigation Level"</strong> column shows to what extent a vulnerability is mitigated. "Full" indicates that both a system prompt instruction and a guardrail are in place.
                    "Partial" indicates that one of the two is in place. "None" indicates that neither one is in place. (This applies to all vulnerabilities except for the "Input Length Limit", in which case only the guardrail is taken into account).
                </div>
            </div>
            <div style="margin-top: 40px;">
                <div style="color: black; font-size: 20px; font-family: Inter; font-weight: 700;">Agent Vulnerability Explanations</div>
                <hr style="width: 100%; background: linear-gradient(270deg, rgba(0, 138, 168, 0.00) 0%, #004064 100%); height: 2px; border: 0;">
                <table style="width: 100%; border-collapse: collapse; border: 0.5px solid #D4D4D4; font-family: Inter; font-size: 10px;">
                    <tr style="background: #F5F5F5; font-weight: 600;">
                        <th style="padding: 6px; border: 0.5px solid #D4D4D4; width: 20%;">Agent Vulnerability</th>
                        <th style="padding: 6px; border: 0.5px solid #D4D4D4; width: 20%;">Framework Mapping</th>
                        <th style="padding: 6px; border: 0.5px solid #D4D4D4; width: 60%;">Description</th>
                    </tr>
                    {% for name, details in vulnerability_definitions.items() %}
                    <tr>
                        <td style="padding: 6px; border: 0.5px solid #D4D4D4; vertical-align: top;">{{ name }}</td>
                        <td style="padding: 6px; border: 0.5px solid #D4D4D4; vertical-align: top;">
                            {% for framework, mapping in details.mapping.items() %}
                                <div><strong>{{ framework }}:</strong><br><span style="white-space: pre-wrap;">{{ mapping }}</span></div>
                            {% endfor %}
                        </td>
                        <td style="padding: 6px; border: 0.5px solid #D4D4D4; vertical-align: top;">{{ details.description|safe }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            {% endif %}
            </div>
        </div>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript">
    const nodes = __INLINE_DATA.nodes;
    const links = __INLINE_DATA.edges;

    const gData = {
        nodes: nodes.map((n) => {
            const img = new Image();
            if (n.image) {
                img.src = n.image;
                n.image = img;
            }
            return n;
        }), 
      links: links,
    };

    const node = document.getElementById('graph');

    const graph = new ForceGraph(node)
        .linkDirectionalArrowLength(2)
        .linkDirectionalArrowRelPos(1)
        .nodeId('name')
        .nodeLabel('label')
        .linkSource('source')
        .linkTarget('target')
        .height(node.parentElement.clientHeight)
        .width(node.parentElement.clientWidth)
        .nodeCanvasObject((n, ctx, scale) => {
            if (n.image) {
                const size = 8;
                ctx.drawImage(n.image, n.x-size/2, n.y-size/2, size, size);
            }
            ctx.font = `${10/scale}px Inter`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            ctx.fillText(n.label, n.x, n.y + 6);

        })
        .nodeCanvasObjectMode(() => "replace")
        .warmupTicks(250)
        .cooldownTime(50)
        .enableNodeDrag(true)
        .graphData(gData)
    ;
    graph.d3Force('center', null);
    graph.onEngineStop(() => {
        graph.zoomToFit(1000, 16)
    });
</script>

<script>
// Script for copy button functionality
document.addEventListener('click', function(event) {
    // Use closest to find the button, starting from the actual click target
    const button = event.target.closest('.copy-btn');

    // 1. Check if we found a button element with the correct class
    if (!button || !button.classList.contains('copy-btn')) {
        return; // Exit if it's not our button or its descendant
    }

    // 2. Check if the button is disabled
    if (button.disabled) {
        return; // Exit if already processing
    }


    // 3. Check if the data attribute exists and has a value
    const textToCopy = button.dataset.copyValue;
    if (typeof textToCopy === 'undefined' || textToCopy === null) {
         console.error("Error: data-copy-value attribute is missing or null on button:", button);
         return; // Exit if no value to copy
    }

    // Disable the button immediately
    button.disabled = true;

    // 4. Check if clipboard API is available
    if (!navigator.clipboard || !navigator.clipboard.writeText) {
        console.error("Clipboard API (writeText) is not available. Requires HTTPS or localhost.");
        alert("Copying is not supported in this browser or context (requires HTTPS).");
        button.disabled = false; // Re-enable since we can't proceed
        return;
    }

    navigator.clipboard.writeText(textToCopy).then(() => {
        // Success feedback: Swap icons using CSS class
        button.classList.add('copied');

        // Hide check and show copy icon again after delay
        setTimeout(() => {
            button.classList.remove('copied');
            button.disabled = false;
        }, 1500);

    }).catch(err => {
        console.error('FAILURE: Could not copy text:', err.name, err.message, err); // DEBUG: Log specific error name and message

        // Error handling - Re-enable button immediately on failure
        button.classList.remove('copied'); // Ensure icon is reset
        button.disabled = false;
    });
});
</script>
</body>
</html>