cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
cameleer-server/.superpowers/brainstorm/10188-1774613058/interactions-detail.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

164 lines
9.1 KiB
HTML
Raw Permalink Blame History

<h2>Node Interactions & Config Badges</h2>
<p class="subtitle">Hover toolbar, selection states, and active config indicators</p>
<div class="section">
<div class="mockup">
<div class="mockup-header">Node States</div>
<div class="mockup-body" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="340" viewBox="0 0 520 340">
<!-- 1. Normal state -->
<text x="10" y="16" fill="#9C9184" font-size="11" font-weight="600">NORMAL</text>
<g transform="translate(10, 24)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- 2. Hovered state with toolbar -->
<text x="270" y="16" fill="#9C9184" font-size="11" font-weight="600">HOVERED (toolbar appears)</text>
<g transform="translate(270, 24)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="#FFFCF5" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Floating toolbar -->
<g transform="translate(30, -32)">
<rect x="0" y="0" width="140" height="28" rx="6" fill="#1A1612" opacity="0.92"/>
<!-- Icons as circles -->
<g transform="translate(10, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#128269;</text>
</g>
<g transform="translate(40, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">T</text>
</g>
<g transform="translate(70, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#9998;</text>
</g>
<g transform="translate(100, 4)">
<circle cx="10" cy="10" r="9" fill="rgba(255,255,255,0.15)"/>
<text x="10" y="14" fill="white" font-size="11" text-anchor="middle">&#8943;</text>
</g>
</g>
</g>
<!-- 3. Selected state -->
<text x="10" y="112" fill="#9C9184" font-size="11" font-weight="600">SELECTED (click)</text>
<g transform="translate(10, 120)">
<rect x="-2" y="-2" width="204" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5" stroke-dasharray="none"/>
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- 4. With config badges -->
<text x="270" y="112" fill="#9C9184" font-size="11" font-weight="600">WITH CONFIG BADGES</text>
<g transform="translate(270, 120)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="192" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Trace badge (top-right corner) -->
<g transform="translate(165, -6)">
<rect x="0" y="0" width="38" height="16" rx="8" fill="#1A7F8E"/>
<text x="19" y="12" fill="white" font-size="8" font-weight="600" text-anchor="middle">TRACE</text>
</g>
<!-- Tap badge -->
<g transform="translate(124, -6)">
<rect x="0" y="0" width="36" height="16" rx="8" fill="#7C3AED"/>
<text x="18" y="12" fill="white" font-size="8" font-weight="600" text-anchor="middle">TAP</text>
</g>
</g>
<!-- 5. Error node style -->
<text x="10" y="210" fill="#9C9184" font-size="11" font-weight="600">ERROR HANDLER NODE</text>
<g transform="translate(10, 218)">
<rect x="0" y="0" width="200" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="6" rx="4" fill="#C0392B"/>
<rect x="4" y="0" width="192" height="6" fill="#C0392B"/>
<text x="16" y="32" fill="#C0392B" font-size="14">&#9888;</text>
<text x="36" y="28" fill="#1A1612" font-size="11" font-weight="600">ON_EXCEPTION</text>
<text x="36" y="44" fill="#5C5347" font-size="10">java.lang.Exception</text>
</g>
<!-- 6. Compound node (Choice) -->
<text x="270" y="210" fill="#9C9184" font-size="11" font-weight="600">COMPOUND NODE (CHOICE)</text>
<g transform="translate(270, 218)">
<rect x="0" y="0" width="220" height="110" rx="4" fill="white" stroke="#7C3AED" stroke-width="1.5"/>
<rect x="0" y="0" width="220" height="22" rx="4" fill="#7C3AED"/>
<rect x="4" y="4" width="212" height="18" fill="#7C3AED"/>
<text x="110" y="16" fill="white" font-size="10" font-weight="600" text-anchor="middle">&#9670; CHOICE</text>
<!-- Children -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="200" height="32" rx="3" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="4" rx="3" fill="#7C3AED"/>
<rect x="3" y="0" width="194" height="4" fill="#7C3AED"/>
<text x="12" y="22" fill="#7C3AED" font-size="10">&#9670;</text>
<text x="28" y="22" fill="#1A1612" font-size="10" font-weight="600">WHEN</text>
<text x="66" y="22" fill="#5C5347" font-size="9">type == 'A'</text>
</g>
<g transform="translate(10, 70)">
<rect x="0" y="0" width="200" height="32" rx="3" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="200" height="4" rx="3" fill="#7C3AED"/>
<rect x="3" y="0" width="194" height="4" fill="#7C3AED"/>
<text x="12" y="22" fill="#7C3AED" font-size="10">&#9670;</text>
<text x="28" y="22" fill="#1A1612" font-size="10" font-weight="600">OTHERWISE</text>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="section" style="margin-top: 24px;">
<div class="mockup">
<div class="mockup-header">Toolbar Actions</div>
<div class="mockup-body" style="padding: 16px;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="border-bottom: 2px solid #E4DFD8;">
<th style="text-align: left; padding: 8px; color: #5C5347;">Icon</th>
<th style="text-align: left; padding: 8px; color: #5C5347;">Action</th>
<th style="text-align: left; padding: 8px; color: #5C5347;">Description</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">&#128269;</td>
<td style="padding: 8px; font-weight: 600;">Inspect</td>
<td style="padding: 8px; color: #5C5347;">Select node &amp; open detail side-panel</td>
</tr>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">T</td>
<td style="padding: 8px; font-weight: 600;">Toggle Trace</td>
<td style="padding: 8px; color: #5C5347;">Enable/disable capture of input+output for this processor</td>
</tr>
<tr style="border-bottom: 1px solid #EDE9E3;">
<td style="padding: 8px;">&#9998;</td>
<td style="padding: 8px; font-weight: 600;">Configure Tap</td>
<td style="padding: 8px; color: #5C5347;">Open tap expression editor for this processor</td>
</tr>
<tr>
<td style="padding: 8px;">&#8943;</td>
<td style="padding: 8px; font-weight: 600;">More</td>
<td style="padding: 8px; color: #5C5347;">Copy processor ID, jump to code, view in search</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink