cameleer-server/.superpowers/brainstorm/14618-1774629192/overlay-intensity.html

<h2>Execution Overlay: Visual Intensity Comparison</h2>
<p class="subtitle">How strong should the overlay tinting be?</p>

<div class="split">
  <!-- Current: Subtle -->
  <div class="mockup" data-choice="subtle" onclick="toggleSelect(this)">
    <div class="mockup-header">Current: Subtle (border only)</div>
    <div class="mockup-body" style="background: #FAFAF8; padding: 16px;">
      <div style="display: flex; flex-direction: column; gap: 12px;">
        <!-- OK node - border only -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Completed</span>
          <div style="position: relative; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
            <div style="height: 5px; background: #1A7F8E;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
              <div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
            </div>
            <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
          </div>
        </div>
        <!-- Failed node - border only -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Failed</span>
          <div style="position: relative; width: 160px; height: 52px; background: #fff; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
            <div style="height: 5px; background: #C6820E;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #1A1612;">bean:validate</div>
              <div style="font-size: 9px; color: #9C9184;">BEAN</div>
            </div>
            <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
            <div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
          </div>
        </div>
        <!-- Skipped node -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Skipped</span>
          <div style="opacity: 0.35; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
            <div style="height: 5px; background: #3D7C47;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
              <div style="font-size: 9px; color: #9C9184;">TO</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Proposed: Tinted backgrounds -->
  <div class="mockup" data-choice="tinted" onclick="toggleSelect(this)">
    <div class="mockup-header">Proposed: Tinted backgrounds</div>
    <div class="mockup-body" style="background: #FAFAF8; padding: 16px;">
      <div style="display: flex; flex-direction: column; gap: 12px;">
        <!-- OK node - green tint -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Completed</span>
          <div style="position: relative; width: 160px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
            <div style="height: 5px; background: #1A7F8E;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
              <div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
            </div>
            <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
          </div>
        </div>
        <!-- Failed node - red tint -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Failed</span>
          <div style="position: relative; width: 160px; height: 52px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
            <div style="height: 5px; background: #C6820E;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #C0392B;">bean:validate</div>
              <div style="font-size: 9px; color: #C0392B;">FAILED</div>
            </div>
            <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
            <div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
          </div>
        </div>
        <!-- Skipped node -->
        <div style="display: flex; align-items: center; gap: 10px;">
          <span style="font-size: 10px; color: #9C9184; width: 70px;">Skipped</span>
          <div style="opacity: 0.35; width: 160px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
            <div style="height: 5px; background: #3D7C47;"></div>
            <div style="padding: 4px 8px;">
              <div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
              <div style="font-size: 9px; color: #9C9184;">TO</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<h3 style="margin-top: 24px;">Full Flow Comparison</h3>
<p class="subtitle">Same route, tinted version — see how it reads at a glance</p>

<div class="mockup">
  <div class="mockup-header">Tinted overlay on a full route</div>
  <div class="mockup-body" style="background: #FAFAF8; padding: 20px;">
    <div style="display: flex; align-items: center; gap: 0;">

      <!-- from:jms (OK) -->
      <div style="position: relative;">
        <div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
          <div style="height: 5px; background: #1A7F8E;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #1A1612;">from:jms:orders</div>
            <div style="font-size: 9px; color: #9C9184;">ENDPOINT</div>
          </div>
        </div>
        <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
      </div>

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

      <!-- log (OK) -->
      <div style="position: relative;">
        <div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
          <div style="height: 5px; background: #C6820E;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #1A1612;">log:incoming</div>
            <div style="font-size: 9px; color: #9C9184;">LOG</div>
          </div>
        </div>
        <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">5ms</div>
      </div>

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

      <!-- setHeader (OK) -->
      <div style="position: relative;">
        <div style="width: 140px; height: 52px; background: #F0F9F1; border: 1.5px solid #3D7C47; border-radius: 6px; border-left: 4px solid #3D7C47; overflow: hidden;">
          <div style="height: 5px; background: #C6820E;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #1A1612;">setHeader:type</div>
            <div style="font-size: 9px; color: #9C9184;">SET_HEADER</div>
          </div>
        </div>
        <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">1ms</div>
      </div>

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

      <!-- bean:validate (FAILED) -->
      <div style="position: relative;">
        <div style="width: 140px; height: 52px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
          <div style="height: 5px; background: #C6820E;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #C0392B;">bean:validate</div>
            <div style="font-size: 9px; color: #C0392B;">FAILED</div>
          </div>
        </div>
        <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #C0392B; font-weight: 500;">120ms</div>
        <div style="position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #C0392B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; font-weight: bold;">!</div>
      </div>

      <svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>

      <!-- to:http (SKIPPED) -->
      <div style="opacity: 0.35;">
        <div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
          <div style="height: 5px; background: #3D7C47;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:http:api</div>
            <div style="font-size: 9px; color: #9C9184;">TO</div>
          </div>
        </div>
      </div>

      <svg width="30" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="25" y2="5" stroke="#9CA3AF" stroke-width="1" stroke-dasharray="3,3"/></svg>

      <!-- to:jms (SKIPPED) -->
      <div style="opacity: 0.35;">
        <div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
          <div style="height: 5px; background: #3D7C47;"></div>
          <div style="padding: 4px 8px;">
            <div style="font-size: 10px; font-weight: 600; color: #1A1612;">to:jms:result</div>
            <div style="font-size: 9px; color: #9C9184;">TO</div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 16px; font-size: 11px; color: #5C5347;">
      <strong>Note:</strong> Edges between executed nodes turn green. Edges leading to skipped nodes become dashed gray.
    </div>
  </div>
</div>