cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ade1733418db492b511a48aebcab2fd77ffd02f1
cameleer-server/.superpowers/brainstorm/14618-1774629192/overlay-intensity.html
hsiegeln 673f0958c5
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m4s
Details
CI / docker (push) Successful in 58s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 38s
Details
revert: temporarily revert EIP_CIRCUIT_BREAKER compound rendering 
Reverting e8039f9 to diagnose compound rendering regression affecting
all compound types (SPLIT, CHOICE, LOOP, DO_TRY) and error handlers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 18:15:10 +02:00

191 lines
11 KiB
HTML
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink