preloop

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 70 1000 480" width="100%" height="100%">
    <defs>



        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="4" result="blur" />
            <feMerge>
                <feMergeNode in="blur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>

        <g id="pkt-req">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#0ea5e9" filter="url(#glow)" />
            <text x="0" y="4" fill="#ffffff" font-size="12" font-family="monospace" font-weight="bold" text-anchor="middle">{ }</text>
        </g>
        <g id="pkt-ok">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#10b981" filter="url(#glow)" />
            <text x="0" y="4.5" fill="#ffffff" font-size="14" font-family="monospace" font-weight="bold" text-anchor="middle">✓</text>
        </g>
        <g id="pkt-err">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#ef4444" filter="url(#glow)" />
            <text x="0" y="4.5" fill="#ffffff" font-size="14" font-family="monospace" font-weight="bold" text-anchor="middle">✕</text>
        </g>
        <g id="pkt-ask">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#f59e0b" filter="url(#glow)" />
            <text x="0" y="4.5" fill="#ffffff" font-size="14" font-family="monospace" font-weight="bold" text-anchor="middle">?</text>
        </g>
        <g id="pkt-esc">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#a855f7" filter="url(#glow)" />
            <text x="0" y="4" fill="#ffffff" font-size="14" font-family="monospace" font-weight="bold" text-anchor="middle">↑</text>
        </g>

        <path id="path-agent-fw" d="M 220 320 L 400 320" />
        <path id="path-fw-s1" d="M 500 320 C 600 320, 600 170, 770 170" />
        <path id="path-fw-s2" d="M 500 320 L 770 320" />
        <path id="path-fw-s3" d="M 500 320 C 600 320, 600 470, 770 470" />
        <path id="path-fw-ai" d="M 450 260 L 450 160" />
        <path id="path-fw-human" d="M 490 260 L 625 145" />
        <path id="path-ai-human" d="M 490 120 L 610 120" />
    </defs>

    <style>
        text { user-select: none; }

        .flow-line {
            fill: none;
            stroke: #334155;
            stroke-width: 4;
            stroke-dasharray: 8 8;
            animation: flow 1.5s linear infinite;
        }
        @keyframes flow {
            from { stroke-dashoffset: 16; }
            to { stroke-dashoffset: 0; }
        }

        .float { animation: float-anim 4s ease-in-out infinite; }
        @keyframes float-anim {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
        }
    </style>

    <rect width="1000" height="680" fill="url(#bg-glow)" />
    <rect width="1000" height="680" fill="url(#grid)" />
    <text x="10" y="125" fill="#f8fafc" font-family="helvetica" font-size="28" font-weight="bold">Preloop MCP Firewall</text>
    <text x="10" y="155" fill="#94a3b8" font-family="helvetica" font-size="16">Parameter-based Policy Engine with</text>
    <text x="10" y="180" fill="#94a3b8" font-family="sans-serif" font-size="16">Contextual Multi-Agent &amp; Human Approvals.</text>

    <path class="flow-line" d="M 220 320 L 400 320" />
    <path class="flow-line" d="M 500 320 C 600 320, 600 170, 770 170" />
    <path class="flow-line" d="M 500 320 L 770 320" />
    <path class="flow-line" d="M 500 320 C 600 320, 600 470, 770 470" />
    <path class="flow-line" d="M 450 260 L 450 150" />
    <path class="flow-line" d="M 490 260 L 625 145" />
    <path class="flow-line" d="M 490 120 L 610 120" />

    <g transform="translate(830, 170)">
        <rect x="-60" y="-35" width="120" height="70" rx="8" fill="#1e293b" stroke="#334155" stroke-width="2" />
        <rect x="-50" y="-20" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="0" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="20" width="100" height="10" rx="2" fill="#020617"/>
        <circle cx="35" cy="-15" r="3" fill="#10b981">
             <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite" />
        </circle>
        <text x="0" y="60" fill="#f8fafc" font-family="monospace" font-size="14" font-weight="bold" text-anchor="middle">Tool: pay</text>
        <text x="0" y="75" fill="#10b981" font-family="monospace" font-size="11" text-anchor="middle">&lt;= $100 : Auto</text>
        <text x="0" y="88" fill="#f59e0b" font-family="monospace" font-size="11" text-anchor="middle">&lt;= $5k : Auth</text>
        <text x="0" y="101" fill="#ef4444" font-family="monospace" font-size="11" text-anchor="middle">&gt; $5k : Block</text>
    </g>

    <g transform="translate(830, 328)">
        <rect x="-60" y="-35" width="120" height="70" rx="8" fill="#1e293b" stroke="#334155" stroke-width="2" />
        <rect x="-50" y="-20" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="0" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="20" width="100" height="10" rx="2" fill="#020617"/>
        <circle cx="35" cy="-15" r="3" fill="#f59e0b">
             <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite" />
        </circle>
        <text x="0" y="60" fill="#f8fafc" font-family="monospace" font-size="14" font-weight="bold" text-anchor="middle">Tool: email</text>
        <text x="0" y="75" fill="#f59e0b" font-family="monospace" font-size="11" text-anchor="middle">Always Req Human</text>
    </g>

    <g transform="translate(830, 460)">
        <rect x="-60" y="-35" width="120" height="70" rx="8" fill="#1e293b" stroke="#334155" stroke-width="2" />
        <rect x="-50" y="-20" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="0" width="100" height="10" rx="2" fill="#020617"/>
        <rect x="-50" y="20" width="100" height="10" rx="2" fill="#020617"/>
        <circle cx="35" cy="-15" r="3" fill="#a855f7">
             <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite" />
        </circle>
        <text x="0" y="60" fill="#f8fafc" font-family="monospace" font-size="14" font-weight="bold" text-anchor="middle">Tool: sql</text>
        <text x="0" y="75" fill="#a855f7" font-family="monospace" font-size="11" text-anchor="middle">Req AI (+Human)</text>
    </g>

    <g transform="translate(450, 120)">
        <g opacity="0">
           <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.786;0.7875;0.825;0.826;1" dur="20s" repeatCount="indefinite"/>
           <circle cx="0" cy="0" r="35" fill="none" stroke="#a855f7" stroke-width="3">
               <animate attributeName="r" values="35;50;35" dur="1s" repeatCount="indefinite"/>
               <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
           </circle>
        </g>

        <rect x="-35" y="-25" width="70" height="50" rx="10" fill="#1e293b" stroke="#a855f7" stroke-width="3"/>
        <circle cx="-15" cy="-5" r="4" fill="#a855f7"/>
        <circle cx="15" cy="-5" r="4" fill="#a855f7"/>
        <path d="M -10 10 C -5 15, 5 15, 10 10" fill="none" stroke="#a855f7" stroke-width="2"/>
        <text x="0" y="45" fill="#cbd5e1" font-family="monospace" font-size="12" font-weight="bold" text-anchor="middle">AI Approver</text>
    </g>

    <g transform="translate(630, 120)">
        <g opacity="0">
           <animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.549;0.55;0.60;0.601;0.824;0.825;0.8625;0.8635;1" dur="20s" repeatCount="indefinite"/>
           <circle cx="0" cy="5" r="30" fill="none" stroke="#f59e0b" stroke-width="3">
               <animate attributeName="r" values="30;45;30" dur="1s" repeatCount="indefinite"/>
               <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
           </circle>
        </g>

        <circle cx="0" cy="5" r="30" fill="#1e293b" stroke="#f59e0b" stroke-width="3"/>
        <circle cx="0" cy="-5" r="10" fill="#f59e0b"/>
        <path d="M -18 22 C -18 7, 18 7, 18 22 Z" fill="#f59e0b"/>
        <text x="0" y="55" fill="#cbd5e1" font-family="monospace" font-size="12" font-weight="bold" text-anchor="middle">Human Approver</text>
    </g>

    <g transform="translate(450, 320)">
        <rect x="-50" y="-60" width="100" height="120" rx="12" fill="#0f172a" stroke="#334155" stroke-width="4" filter="url(#glow)">
            <animate attributeName="stroke"
                values="#38bdf8;#38bdf8;#10b981;#10b981;#475569;#475569;#38bdf8;#38bdf8;#ef4444;#ef4444;#38bdf8;#38bdf8;#f59e0b;#f59e0b;#10b981;#10b981;#38bdf8;#38bdf8;#a855f7;#a855f7;#f59e0b;#f59e0b;#10b981;#10b981"
                keyTimes="0;0.049;0.05;0.199;0.20;0.249;0.25;0.299;0.30;0.499;0.50;0.549;0.55;0.649;0.65;0.749;0.75;0.7874;0.7875;0.8249;0.825;0.899;0.90;1"
                dur="20s" repeatCount="indefinite" />
        </rect>

        <g id="preloop-logo" width="100" height="120" transform="scale(0.06) translate(-480, -750)" fill="#FFFFFF" fill-rule="nonzero">
            <path d="M531.030651,0 C730.405446,0 892.030651,161.625205 892.030651,361 C892.030651,560.374795 730.405446,722 531.030651,722 C465.291938,722 403.657288,704.428413 350.567272,673.725809 L405.250574,619.042004 C443.232077,637.590388 485.915717,648 531.030651,648 C689.536375,648 818.030651,519.505723 818.030651,361 C818.030651,202.494277 689.536375,74 531.030651,74 C372.524928,74 244.030651,202.494277 244.030651,361 C244.030651,406.132219 254.448241,448.831279 273.009969,486.823729 L218.329321,541.5057 C187.611578,488.406119 170.030651,426.756182 170.030651,361 C170.030651,161.625205 331.655857,0 531.030651,0 Z" id="Combined-Shape"></path>
            <path d="M571.730882,266.133399 L623.623354,318.88917 L237.226702,700.61499 L233.513357,704.27738 C210.166625,727.303745 172.658216,727.321636 149.289528,704.317554 L140.228363,695.397764 L140.228363,695.397764 L0,554.370673 L52.3259018,502.044771 L191.850951,641.569768 L571.730882,266.133399 Z" id="Path-2"></path>
        </g>

        <text x="0" y="25" fill="#f8fafc" font-family="monospace" font-size="16" font-weight="bold" text-anchor="middle">Preloop</text>
        <text x="0" y="42" fill="#94a3b8" font-family="monospace" font-size="12" text-anchor="middle">Firewall</text>

        <text x="0" y="75" font-family="monospace" font-size="12" font-weight="bold" text-anchor="middle">
            <tspan fill="#38bdf8" opacity="0">
                EVALUATING
                <animate attributeName="opacity" values="1;1;0;0; 1;1;0;0; 1;1;0;0; 1;1;0;0" keyTimes="0;0.049;0.05;0.249; 0.25;0.299;0.30;0.499; 0.50;0.549;0.55;0.749; 0.75;0.7874;0.7875;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#10b981" opacity="0">
                AUTO-APPROVED
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.049;0.05;0.199;0.20;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#64748b" opacity="0">
                IDLE
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.199;0.20;0.249;0.25;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#ef4444" opacity="0">
                BLOCKED
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.299;0.30;0.499;0.50;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#f59e0b" opacity="0">
                WAIT: HUMAN
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.549;0.55;0.649;0.65;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#10b981" opacity="0">
                APPROVED
                <animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.649;0.65;0.749;0.75;0.899;0.90;0.999;1;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#a855f7" opacity="0">
                WAIT: AI
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7874;0.7875;0.8249;0.825;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
            <tspan x="0" y="75" fill="#f59e0b" opacity="0">
                ESCALATED
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.8249;0.825;0.899;0.90;1" dur="20s" repeatCount="indefinite"/>
            </tspan>
        </text>
    </g>

    <g transform="translate(140, 319)" >
        <path d="M -50 0 L -80 -15 L -80 15 Z" fill="#991b1b" stroke="#fca5a5" stroke-width="2"/>

        <rect x="-50" y="-30" width="70" height="60" rx="20" fill="#ef4444" stroke="#fca5a5" stroke-width="2"/>
        <line x1="-30" y1="-28" x2="-30" y2="28" stroke="#b91c1c" stroke-width="2"/>
        <line x1="-10" y1="-30" x2="-10" y2="30" stroke="#b91c1c" stroke-width="2"/>

        <circle cx="10" cy="-15" r="4" fill="#0f172a"/>
        <circle cx="10" cy="15" r="4" fill="#0f172a"/>
        <circle cx="10" cy="-15" r="1.5" fill="#38bdf8">
            <animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite"/>
        </circle>
        <circle cx="10" cy="15" r="1.5" fill="#38bdf8">
            <animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite"/>
        </circle>

        <path d="M 15 -20 C 35 -50 65 -30 55 -10 C 45 0 25 -10 15 -20 Z" fill="#ef4444" stroke="#fca5a5" stroke-width="2"/>
        <path d="M 15 20 C 35 50 65 30 55 10 C 45 0 25 10 15 20 Z" fill="#ef4444" stroke="#fca5a5" stroke-width="2"/>
        <path d="M 45 -15 L 60 -5 L 50 0 Z" fill="#0f172a"/>
        <path d="M 45 15 L 60 5 L 50 0 Z" fill="#0f172a"/>

        <path d="M 20 -25 Q 40 -45 55 -40" fill="none" stroke="#fca5a5" stroke-width="2"/>
        <path d="M 20 25 Q 40 45 55 40" fill="none" stroke="#fca5a5" stroke-width="2"/>

        <text x="0" y="55" fill="#fca5a5" font-family="monospace" font-size="14" font-weight="bold" text-anchor="middle">AI Agent</text>
    </g>

    <g id="packets">
        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;0.001;0.05;0.051;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 220 320 L 400 320" keyPoints="0;0;1;1" keyTimes="0;0.000;0.05;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.049;0.05;0.10;0.101;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 500 320 C 600 320, 600 170, 770 170" keyPoints="0;0;1;1" keyTimes="0;0.05;0.10;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.099;0.10;0.15;0.151;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 770 170 C 600 170, 600 320, 500 320" keyPoints="0;0;1;1" keyTimes="0;0.10;0.15;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.149;0.15;0.20;0.201;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 400 320 L 220 320" keyPoints="0;0;1;1" keyTimes="0;0.15;0.20;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>

        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.249;0.25;0.30;0.301;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 220 320 L 400 320" keyPoints="0;0;1;1" keyTimes="0;0.25;0.30;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-err" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.299;0.30;0.35;0.351;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 400 320 L 220 320" keyPoints="0;0;1;1" keyTimes="0;0.30;0.35;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>

        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.499;0.50;0.55;0.551;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 220 320 L 400 320" keyPoints="0;0;1;1" keyTimes="0;0.50;0.55;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ask" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.549;0.55;0.60;0.601;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 490 260 L 625 145" keyPoints="0;0;1;1" keyTimes="0;0.55;0.60;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.599;0.60;0.65;0.651;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 625 145 L 490 260" keyPoints="0;0;1;1" keyTimes="0;0.60;0.65;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.649;0.65;0.6875;0.6885;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 500 320 L 770 320" keyPoints="0;0;1;1" keyTimes="0;0.65;0.6875;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6865;0.6875;0.725;0.726;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 770 320 L 500 320" keyPoints="0;0;1;1" keyTimes="0;0.6875;0.725;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.724;0.725;0.75;0.751;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 400 320 L 220 320" keyPoints="0;0;1;1" keyTimes="0;0.725;0.75;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>

        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.749;0.75;0.7875;0.7885;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 220 320 L 400 320" keyPoints="0;0;1;1" keyTimes="0;0.75;0.7875;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ask" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7865;0.7875;0.825;0.826;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 450 260 L 450 160" keyPoints="0;0;1;1" keyTimes="0;0.7875;0.825;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-esc" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.824;0.825;0.8625;0.8635;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 490 120 L 610 120" keyPoints="0;0;1;1" keyTimes="0;0.825;0.8625;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.8615;0.8625;0.90;0.901;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 610 120 L 490 120" keyPoints="0;0;1;1" keyTimes="0;0.8625;0.90;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.899;0.90;0.925;0.926;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 450 160 L 450 260" keyPoints="0;0;1;1" keyTimes="0;0.90;0.925;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-req" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.924;0.925;0.95;0.951;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 500 320 C 600 320, 600 470, 770 470" keyPoints="0;0;1;1" keyTimes="0;0.925;0.95;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.949;0.95;0.975;0.976;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 770 470 C 600 470, 600 320, 500 320" keyPoints="0;0;1;1" keyTimes="0;0.95;0.975;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
        <g opacity="0"><use href="#pkt-ok" />
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.974;0.975;0.999;1;1" dur="20s" repeatCount="indefinite" />
            <animateMotion path="M 400 320 L 220 320" keyPoints="0;0;1;1" keyTimes="0;0.975;0.999;1" calcMode="linear" dur="20s" repeatCount="indefinite" />
        </g>
    </g>

    <g transform="translate(10, 434)">
        <rect width="600" height="110" rx="8" fill="#020617" stroke="#1e293b" stroke-width="2"/>
        <text x="20" y="25" fill="#64748b" font-family="monospace" font-size="12">Preloop Policy Execution Log</text>

        <g opacity="0">
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0001;0.001;0.24;0.241;1" dur="20s" repeatCount="indefinite" />
            <text x="20" y="55" fill="#38bdf8" font-family="monospace" font-size="14">&gt; Agent tool call: pay(amount=50)</text>
            <text x="20" y="80" fill="#10b981" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.049;0.05;0.24;0.241;1" dur="20s" repeatCount="indefinite" />
                [ALLOWED] Policy matched: amount &lt;= $100 &#x2192; Auto-Approve
            </text>
        </g>

        <g opacity="0">
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.249;0.25;0.49;0.491;1" dur="20s" repeatCount="indefinite" />
            <text x="20" y="55" fill="#38bdf8" font-family="monospace" font-size="14">&gt; Agent tool call: pay(amount=10000)</text>
            <text x="20" y="80" fill="#ef4444" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.299;0.30;0.49;0.491;1" dur="20s" repeatCount="indefinite" />
                [DENIED] Policy violation: amount &gt; $5000 &#x2192; Hard Block
            </text>
        </g>

        <g opacity="0">
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.499;0.50;0.74;0.741;1" dur="20s" repeatCount="indefinite" />
            <text x="20" y="45" fill="#38bdf8" font-family="monospace" font-size="14">&gt; Agent tool call: email(to="all")</text>
            <text x="20" y="70" fill="#f59e0b" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.549;0.55;0.74;0.741;1" dur="20s" repeatCount="indefinite" />
                [HOLD] email tool always requires Human Approval
            </text>
            <text x="20" y="95" fill="#10b981" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.649;0.65;0.74;0.741;1" dur="20s" repeatCount="indefinite" />
                [APPROVED] Human authorized the action
            </text>
        </g>

        <g opacity="0">
            <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.749;0.75;0.99;0.991;1" dur="20s" repeatCount="indefinite" />
            <text x="20" y="40" fill="#38bdf8" font-family="monospace" font-size="14">&gt; Agent tool call: sql(cmd="DROP TABLE...")</text>
            <text x="20" y="60" fill="#a855f7" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7865;0.7875;0.99;0.991;1" dur="20s" repeatCount="indefinite" />
                [HOLD] sql tool requires AI Approval
            </text>
            <text x="20" y="80" fill="#f59e0b" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.824;0.825;0.99;0.991;1" dur="20s" repeatCount="indefinite" />
                [ESCALATION] AI agent unsure, delegating to Human
            </text>
            <text x="20" y="100" fill="#10b981" font-family="monospace" font-size="14" opacity="0">
                <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.899;0.90;0.99;0.991;1" dur="20s" repeatCount="indefinite" />
                [APPROVED] Human authorized the action
            </text>
        </g>
    </g>

</svg>