cameleer-server/.superpowers/brainstorm/14618-1774629192/iteration-stepper.html

<h2>Per-Compound Iteration Stepper</h2>
<p class="subtitle">Each loop/split compound gets its own stepper in the header bar</p>

<div class="mockup">
  <div class="mockup-header">Loop with iteration stepper — iteration 3 of 5</div>
  <div class="mockup-body" style="background: #FAFAF8; padding: 20px;">

    <!-- LOOP compound -->
    <div style="position: relative; border: 2px dashed #7C3AED; border-radius: 8px; background: #FAFAFF; max-width: 600px;">
      <!-- Compound header with stepper -->
      <div style="background: #7C3AED; color: white; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between;">
        <span>LOOP</span>
        <!-- Iteration stepper -->
        <div style="display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 4px;">
          <button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
          <span style="font-size: 10px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums;">3 / 5</span>
          <button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
        </div>
      </div>

      <!-- Loop body: showing iteration 3 data -->
      <div style="padding: 12px; display: flex; align-items: center; gap: 0;">
        <!-- transform (OK in iteration 3) -->
        <div style="position: relative;">
          <div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
            <div style="height: 4px; background: #C6820E;"></div>
            <div style="padding: 3px 6px;">
              <div style="font-size: 9px; font-weight: 600; color: #1A1612;">transform</div>
              <div style="font-size: 8px; color: #9C9184;">TRANSFORM</div>
            </div>
          </div>
          <div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">3ms</div>
          <div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
        </div>

        <svg width="24" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="17,2 22,5 17,8" fill="#3D7C47"/></svg>

        <!-- to:http (OK in iteration 3) -->
        <div style="position: relative;">
          <div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
            <div style="height: 4px; background: #3D7C47;"></div>
            <div style="padding: 3px 6px;">
              <div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:http:api</div>
              <div style="font-size: 8px; color: #9C9184;">TO</div>
            </div>
          </div>
          <div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">45ms</div>
          <div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
        </div>

        <svg width="24" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#3D7C47" stroke-width="1.5"/><polygon points="17,2 22,5 17,8" fill="#3D7C47"/></svg>

        <!-- log (OK in iteration 3) -->
        <div style="position: relative;">
          <div style="width: 130px; height: 48px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
            <div style="height: 4px; background: #C6820E;"></div>
            <div style="padding: 3px 6px;">
              <div style="font-size: 9px; font-weight: 600; color: #1A1612;">log:result</div>
              <div style="font-size: 8px; color: #9C9184;">LOG</div>
            </div>
          </div>
          <div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #3D7C47;">1ms</div>
          <div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
        </div>
      </div>
    </div>
  </div>
</div>

<h3 style="margin-top: 24px;">Nested Loops</h3>
<p class="subtitle">Each compound level has its own independent stepper</p>

<div class="mockup">
  <div class="mockup-header">Outer loop (iteration 2/3) containing inner split (branch 1/4)</div>
  <div class="mockup-body" style="background: #FAFAF8; padding: 20px;">

    <!-- Outer LOOP -->
    <div style="border: 2px dashed #7C3AED; border-radius: 8px; background: #FAFAFF; max-width: 550px;">
      <div style="background: #7C3AED; color: white; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: space-between;">
        <span>LOOP</span>
        <div style="display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 4px;">
          <button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
          <span style="font-size: 10px; min-width: 30px; text-align: center;">2 / 3</span>
          <button style="width: 18px; height: 18px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
        </div>
      </div>

      <div style="padding: 12px;">
        <div style="display: flex; align-items: center; gap: 0;">

          <!-- Processor before split -->
          <div style="position: relative;">
            <div style="width: 110px; height: 44px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 5px; border-left: 3px solid #3D7C47; overflow: hidden;">
              <div style="height: 4px; background: #C6820E;"></div>
              <div style="padding: 3px 6px;">
                <div style="font-size: 9px; font-weight: 600; color: #1A1612;">setBody</div>
                <div style="font-size: 8px; color: #9C9184;">SET_BODY</div>
              </div>
            </div>
            <div style="position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">&#10003;</div>
          </div>

          <svg width="20" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="16" y2="5" stroke="#3D7C47" stroke-width="1.5"/></svg>

          <!-- Inner SPLIT -->
          <div style="border: 2px dashed #7C3AED; border-radius: 6px; background: #F8F7FF;">
            <div style="background: #9B6AED; color: white; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 3px 3px 0 0; display: flex; align-items: center; justify-content: space-between;">
              <span>SPLIT</span>
              <div style="display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; padding: 1px 3px;">
                <button style="width: 16px; height: 16px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center;">&lsaquo;</button>
                <span style="font-size: 9px; min-width: 26px; text-align: center;">1 / 4</span>
                <button style="width: 16px; height: 16px; border: none; background: rgba(255,255,255,0.2); color: white; border-radius: 2px; cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center;">&rsaquo;</button>
              </div>
            </div>
            <div style="padding: 8px; display: flex; align-items: center; gap: 0;">
              <div style="position: relative;">
                <div style="width: 100px; height: 40px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 4px; border-left: 3px solid #3D7C47; overflow: hidden;">
                  <div style="height: 3px; background: #3D7C47;"></div>
                  <div style="padding: 2px 5px;">
                    <div style="font-size: 8px; font-weight: 600; color: #1A1612;">to:kafka</div>
                    <div style="font-size: 7px; color: #9C9184;">TO</div>
                  </div>
                </div>
                <div style="position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: #3D7C47; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white;">&#10003;</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<h3 style="margin-top: 24px;">Stepper Behavior</h3>
<div style="font-size: 13px; color: #5C5347; line-height: 1.8;">
  <ul style="margin: 0; padding-left: 20px;">
    <li><strong>Independent per compound</strong> — outer loop at iteration 2, inner split at branch 1</li>
    <li><strong>Overlay updates per-compound</strong> — stepping the loop re-renders its children's execution data for that iteration</li>
    <li><strong>CHOICE shows which branch was taken</strong> — no stepper, just highlights the taken branch</li>
    <li><strong>Keyboard</strong> — when a compound is focused/hovered, left/right arrow keys step through iterations</li>
    <li><strong>Detail panel syncs</strong> — selecting a processor inside a loop shows that iteration's data</li>
  </ul>
</div>