revert: temporarily revert EIP_CIRCUIT_BREAKER compound rendering
All checks were successful
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m4s
CI / docker (push) Successful in 58s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 38s

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>
This commit is contained in:
hsiegeln
2026-03-29 18:15:10 +02:00
parent e8039f9cc4
commit 673f0958c5
69 changed files with 8099 additions and 149 deletions

View File

@@ -0,0 +1,119 @@
<h2>Node Interaction Model</h2>
<p class="subtitle">What happens when you interact with a processor node on the diagram?</p>
<div class="cards">
<!-- Option A: Click-to-select + context menu -->
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="180" viewBox="0 0 420 180">
<!-- Normal node -->
<g transform="translate(10, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
</g>
<!-- Selected node (amber ring) -->
<g transform="translate(10, 100)">
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
</g>
<!-- Context menu on right-click -->
<g transform="translate(220, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<!-- Context menu -->
<g transform="translate(100, 40)">
<rect x="0" y="0" width="140" height="96" rx="6" fill="white" stroke="#E4DFD8" stroke-width="1" filter="url(#shadow)"/>
<text x="12" y="20" fill="#1A1612" font-size="11">&#128269; View Snapshot</text>
<line x1="8" y1="28" x2="132" y2="28" stroke="#EDE9E3" stroke-width="1"/>
<text x="12" y="44" fill="#1A7F8E" font-size="11">&#9881; Enable Tracing</text>
<text x="12" y="64" fill="#1A7F8E" font-size="11">&#128204; Set Tap</text>
<line x1="8" y1="72" x2="132" y2="72" stroke="#EDE9E3" stroke-width="1"/>
<text x="12" y="88" fill="#5C5347" font-size="11">&#128203; Copy Processor ID</text>
</g>
<text x="90" y="152" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">right-click = context menu</text>
</g>
<defs>
<filter id="shadow" x="-4" y="-2" width="148" height="104">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>
</filter>
</defs>
</svg>
</div>
<div class="card-body">
<h3>A: Click-Select + Right-Click Menu</h3>
<p>Click to select a node (amber highlight ring). Right-click for context menu with tracing/tap/snapshot actions. Clean separation of concerns. Standard desktop UX.</p>
</div>
</div>
<!-- Option B: Hover toolbar -->
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="180" viewBox="0 0 420 180">
<!-- Normal node -->
<g transform="translate(10, 10)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
</g>
<!-- Hovered node with floating toolbar -->
<g transform="translate(10, 100)">
<rect x="0" y="0" width="180" height="56" rx="4" fill="#FFFCF5" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" 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 above -->
<g transform="translate(20, -30)">
<rect x="0" y="0" width="140" height="26" rx="13" fill="#1A1612" opacity="0.9"/>
<text x="18" y="17" fill="white" font-size="12" title="View">&#128269;</text>
<text x="46" y="17" fill="white" font-size="12" title="Trace">&#9881;</text>
<text x="74" y="17" fill="white" font-size="12" title="Tap">&#128204;</text>
<text x="102" y="17" fill="white" font-size="12" title="Copy">&#128203;</text>
<text x="124" y="17" fill="white" font-size="12" title="More">&#8943;</text>
</g>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">hover = toolbar appears</text>
</g>
<!-- Click = select (same as A) -->
<g transform="translate(220, 50)">
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
<text x="16" y="32" fill="#C6820E" font-size="14">&#9881;</text>
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
</g>
</svg>
</div>
<div class="card-body">
<h3>B: Hover Floating Toolbar</h3>
<p>Hover reveals a dark floating icon toolbar above the node. Click still selects. More discoverable than right-click, but can feel cluttered on dense diagrams.</p>
</div>
</div>
</div>