blog/claude-code-agent-ops/01/ci-pipeline

ci-pipeline.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 380" font-family="system-ui, -apple-system, sans-serif">
  <defs>
    <filter id="shadow" x="-2%" y="-2%" width="104%" height="108%">
      <feDropShadow dx="1" dy="2" stdDeviation="3" flood-opacity="0.08"/>
    </filter>
  </defs>

  <!-- No outer background — inherits page color -->

  <!-- Title -->
  <text x="450" y="30" text-anchor="middle" fill="#1a1a2e" font-size="20" font-weight="bold">Every PR Gets 12+ Automated Checks</text>
  <text x="450" y="50" text-anchor="middle" fill="#666" font-size="13">kagenti/kagenti CI pipeline</text>

  <!-- Security Column -->
  <rect x="20" y="70" width="270" height="260" rx="10" fill="#faf5ff" stroke="#8854d0" stroke-width="1.5" filter="url(#shadow)"/>
  <rect x="20" y="70" width="270" height="36" rx="10" fill="#8854d0"/>
  <rect x="20" y="90" width="270" height="16" fill="#8854d0"/>
  <text x="155" y="95" text-anchor="middle" fill="#fff" font-size="15" font-weight="bold">Security</text>

  <circle cx="50" cy="130" r="7" fill="#00b894"/><text x="68" y="135" fill="#333" font-size="13">OpenSSF Scorecard</text>
  <circle cx="50" cy="160" r="7" fill="#00b894"/><text x="68" y="165" fill="#333" font-size="13">CodeQL (JavaScript)</text>
  <circle cx="50" cy="190" r="7" fill="#00b894"/><text x="68" y="195" fill="#333" font-size="13">CodeQL (Python)</text>
  <circle cx="50" cy="220" r="7" fill="#00b894"/><text x="68" y="225" fill="#333" font-size="13">Trivy Config Scan</text>
  <circle cx="50" cy="250" r="7" fill="#00b894"/><text x="68" y="255" fill="#333" font-size="13">Trivy Filesystem Scan</text>
  <circle cx="50" cy="280" r="7" fill="#00b894"/><text x="68" y="285" fill="#333" font-size="13">Dependency Review</text>

  <!-- Quality Column -->
  <rect x="315" y="70" width="270" height="260" rx="10" fill="#f0f7ff" stroke="#4a9eff" stroke-width="1.5" filter="url(#shadow)"/>
  <rect x="315" y="70" width="270" height="36" rx="10" fill="#4a9eff"/>
  <rect x="315" y="90" width="270" height="16" fill="#4a9eff"/>
  <text x="450" y="95" text-anchor="middle" fill="#fff" font-size="15" font-weight="bold">Quality</text>

  <circle cx="345" cy="130" r="7" fill="#00b894"/><text x="363" y="135" fill="#333" font-size="13">Pre-commit Hooks</text>
  <circle cx="345" cy="160" r="7" fill="#00b894"/><text x="363" y="165" fill="#333" font-size="13">Ruff Lint + Format</text>
  <circle cx="345" cy="190" r="7" fill="#00b894"/><text x="363" y="195" fill="#333" font-size="13">Helm Template Check</text>
  <circle cx="345" cy="220" r="7" fill="#00b894"/><text x="363" y="225" fill="#333" font-size="13">Type Checking</text>

  <!-- Verification Column -->
  <rect x="610" y="70" width="270" height="260" rx="10" fill="#f0faf5" stroke="#00b894" stroke-width="1.5" filter="url(#shadow)"/>
  <rect x="610" y="70" width="270" height="36" rx="10" fill="#00b894"/>
  <rect x="610" y="90" width="270" height="16" fill="#00b894"/>
  <text x="745" y="95" text-anchor="middle" fill="#fff" font-size="15" font-weight="bold">Verification</text>

  <circle cx="640" cy="130" r="7" fill="#00b894"/><text x="658" y="135" fill="#333" font-size="13">E2E on Kind (every PR)</text>
  <circle cx="640" cy="160" r="7" fill="#fdcb6e" stroke="#e8a817" stroke-width="1"/><text x="658" y="165" fill="#333" font-size="13">E2E on HyperShift</text>
  <text x="658" y="183" fill="#888" font-size="11" font-style="italic">(label-gated: safe-to-test)</text>

  <!-- Score Badge -->
  <rect x="320" y="345" width="260" height="32" rx="16" fill="#1a1a2e"/>
  <text x="450" y="367" text-anchor="middle" fill="#fdcb6e" font-size="14" font-weight="bold">OpenSSF Score: 8.2 / 10</text>
</svg>