blog/claude-code-agent-ops/01/tdd-ci-loop-smil

tdd-ci-loop-smil.svg

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="460" viewBox="0 0 800 460" font-family="system-ui, -apple-system, sans-serif">
  <!--
    SMIL-only animation (no CSS @keyframes).
    Medium gist embeds should support SMIL natively.
  -->
  <defs>
    <filter id="shadow" x="-2%" y="-2%" width="104%" height="108%">
      <feDropShadow dx="1" dy="2" stdDeviation="3" flood-opacity="0.08"/>
    </filter>
    <marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#4a9eff"/>
    </marker>
    <marker id="arrow-red" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#ee5a24"/>
    </marker>
    <marker id="arrow-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#00b894"/>
    </marker>
    <marker id="arrow-purple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#8854d0"/>
    </marker>
  </defs>

  <!-- Title -->
  <text x="400" y="28" text-anchor="middle" fill="#1a1a2e" font-size="20" font-weight="bold">tdd:ci — Agent-Managed CI Loop</text>
  <text x="400" y="48" text-anchor="middle" fill="#666" font-size="12">Automated feedback loop with escalation</text>

  <!-- Node: Write Code -->
  <rect x="40" y="80" width="150" height="60" rx="10" fill="#f0f7ff" stroke="#4a9eff" stroke-width="1.5" filter="url(#shadow)">
    <animate attributeName="stroke-width" values="1.5;3;1.5" dur="2s" repeatCount="indefinite"/>
  </rect>
  <text x="115" y="107" text-anchor="middle" fill="#4a9eff" font-size="14" font-weight="bold">Write Code</text>
  <text x="115" y="127" text-anchor="middle" fill="#888" font-size="11">Claude Code</text>

  <!-- Node: Local Checks -->
  <rect x="250" y="80" width="150" height="60" rx="10" fill="#f0f7ff" stroke="#4a9eff" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="325" y="107" text-anchor="middle" fill="#4a9eff" font-size="14" font-weight="bold">Local Checks</text>
  <text x="325" y="127" text-anchor="middle" fill="#888" font-size="11">pre-commit, ruff</text>

  <!-- Node: Push -->
  <rect x="460" y="80" width="150" height="60" rx="10" fill="#f0f7ff" stroke="#4a9eff" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="535" y="107" text-anchor="middle" fill="#4a9eff" font-size="14" font-weight="bold">Push to PR</text>
  <text x="535" y="127" text-anchor="middle" fill="#888" font-size="11">git push</text>

  <!-- Node: CI Runs -->
  <rect x="600" y="190" width="170" height="70" rx="10" fill="#fffbf0" stroke="#e8a817" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="685" y="218" text-anchor="middle" fill="#c48a00" font-size="14" font-weight="bold">CI Runs</text>
  <text x="685" y="238" text-anchor="middle" fill="#888" font-size="11">12+ checks</text>
  <!-- SMIL spinner -->
  <circle cx="685" cy="255" r="4" fill="none" stroke="#e8a817" stroke-width="1.5" stroke-dasharray="12 8">
    <animateTransform attributeName="transform" type="rotate" from="0 685 255" to="360 685 255" dur="2s" repeatCount="indefinite"/>
  </circle>

  <!-- Node: MERGE -->
  <rect x="625" y="315" width="120" height="45" rx="22" fill="#00b894" filter="url(#shadow)">
    <animate attributeName="fill" values="#00b894;#00d2a0;#00b894" dur="3s" repeatCount="indefinite"/>
  </rect>
  <text x="685" y="344" text-anchor="middle" fill="#fff" font-size="16" font-weight="bold">MERGE</text>

  <!-- Node: RCA Analyze -->
  <rect x="290" y="295" width="190" height="70" rx="10" fill="#fef5f5" stroke="#ee5a24" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="385" y="322" text-anchor="middle" fill="#ee5a24" font-size="14" font-weight="bold">rca:ci Analyze</text>
  <text x="385" y="342" text-anchor="middle" fill="#888" font-size="11">5-phase investigation</text>
  <text x="385" y="357" text-anchor="middle" fill="#888" font-size="11">→ propose fix</text>

  <!-- Node: Human Review -->
  <rect x="50" y="295" width="170" height="60" rx="10" fill="#faf5ff" stroke="#8854d0" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="135" y="322" text-anchor="middle" fill="#8854d0" font-size="14" font-weight="bold">Human Review</text>
  <text x="135" y="342" text-anchor="middle" fill="#888" font-size="11">approve fix, iterate</text>

  <!-- Static arrows -->
  <line x1="190" y1="110" x2="248" y2="110" stroke="#4a9eff" stroke-width="2" marker-end="url(#arrow-blue)"/>
  <line x1="400" y1="110" x2="458" y2="110" stroke="#4a9eff" stroke-width="2" marker-end="url(#arrow-blue)"/>
  <path d="M 610 110 Q 685 110 685 188" fill="none" stroke="#4a9eff" stroke-width="2" marker-end="url(#arrow-blue)"/>
  <line x1="685" y1="260" x2="685" y2="313" stroke="#00b894" stroke-width="2" marker-end="url(#arrow-green)"/>
  <text x="700" y="288" fill="#00b894" font-size="12" font-weight="bold">Pass</text>
  <path d="M 598 225 L 482 320" fill="none" stroke="#ee5a24" stroke-width="2" marker-end="url(#arrow-red)"/>
  <text x="535" y="270" fill="#ee5a24" font-size="12" font-weight="bold">Fail</text>
  <line x1="288" y1="330" x2="222" y2="330" stroke="#8854d0" stroke-width="2" marker-end="url(#arrow-purple)"/>
  <path d="M 135 293 Q 135 200 115 142" fill="none" stroke="#8854d0" stroke-width="2" marker-end="url(#arrow-purple)"/>
  <text x="95" y="218" fill="#8854d0" font-size="11" font-weight="bold" transform="rotate(-90 95 218)">iterate</text>

  <!-- SMIL traveling dot: happy path -->
  <circle r="5" fill="#4a9eff" opacity="0.9">
    <animate attributeName="r" values="4;7;4" dur="1.2s" repeatCount="indefinite"/>
    <animateMotion dur="5s" repeatCount="indefinite" path="M 115,110 L 325,110 L 535,110 Q 685,110 685,225 L 685,340"/>
  </circle>

  <!-- SMIL traveling dot: failure path -->
  <circle r="4" fill="#ee5a24" opacity="0.7">
    <animateMotion dur="6s" repeatCount="indefinite" begin="2.5s" path="M 600,225 L 385,330 L 135,325 Q 135,200 115,140 L 325,110 L 535,110 Q 685,110 685,225"/>
  </circle>

  <!-- Escalation note -->
  <rect x="50" y="400" width="700" height="48" rx="10" fill="#faf5ff" stroke="#8854d0" stroke-width="1" filter="url(#shadow)"/>
  <text x="400" y="422" text-anchor="middle" fill="#8854d0" font-size="13" font-weight="bold">After 3 failures → escalate to tdd:hypershift</text>
  <text x="400" y="440" text-anchor="middle" fill="#888" font-size="11">Live cluster debugging or tdd:kind for local iteration</text>
</svg>