673f0958c5
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>
167 lines
12 KiB
HTML
167 lines
12 KiB
HTML
<h2>Execution Overlay: Page Layout</h2>
|
|
<p class="subtitle">How should the diagram + execution details be arranged?</p>
|
|
|
|
<div class="cards">
|
|
<!-- Option A: Horizontal Split -->
|
|
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
|
|
<!-- IDE-style: diagram top, detail bottom -->
|
|
<div style="display: flex; flex-direction: column; gap: 8px; height: 280px;">
|
|
<!-- Top: Diagram -->
|
|
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
|
|
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
|
|
<!-- Mini route flow mockup -->
|
|
<div style="display: flex; align-items: center; gap: 6px; margin-left: 20px;">
|
|
<div style="width: 60px; height: 28px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">from:jms</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #3D7C47;">log</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #C0392B; opacity: 0.9;">bean</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #3D7C47; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; opacity: 0.4;">to:http</div>
|
|
</div>
|
|
<!-- Zoom controls hint -->
|
|
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
|
|
<!-- Iteration stepper -->
|
|
<div style="position: absolute; top: 6px; right: 6px; font-size: 8px; color: #C6820E; background: #2a2520; padding: 2px 8px; border: 1px solid #3a3530; border-radius: 3px;">Loop 2/5</div>
|
|
</div>
|
|
<!-- Resizable splitter -->
|
|
<div style="height: 3px; background: #3a3530; border-radius: 2px; cursor: row-resize;"></div>
|
|
<!-- Bottom: Details -->
|
|
<div style="flex: 0 0 100px; background: #2a2520; border-radius: 4px; padding: 8px; overflow: hidden;">
|
|
<div style="display: flex; gap: 12px; font-size: 9px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 4px; margin-bottom: 6px;">
|
|
<span style="color: #C6820E; border-bottom: 2px solid #C6820E; padding-bottom: 3px;">Input</span>
|
|
<span>Output</span>
|
|
<span>Headers</span>
|
|
<span>Error</span>
|
|
<span>Timeline</span>
|
|
</div>
|
|
<div style="font-family: monospace; font-size: 8px; color: #9C9184; line-height: 1.5;">
|
|
<div>{"orderId": "ORD-1234",</div>
|
|
<div> "product": "Widget A",</div>
|
|
<div> "quantity": 5}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A: Top/Bottom Split (IDE Style)</h3>
|
|
<p>Diagram on top, tabbed detail panel below. Resizable splitter between them. Maximizes diagram width. Tabs: Input, Output, Headers, Error, Timeline.</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>Pros</h4><ul><li>Full diagram width</li><li>Familiar IDE pattern</li><li>Detail panel always visible</li></ul></div>
|
|
<div class="cons"><h4>Cons</h4><ul><li>Vertical space shared</li><li>Diagram shrinks on small screens</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option B: Right Panel -->
|
|
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
|
|
<div style="display: flex; gap: 8px; height: 280px;">
|
|
<!-- Left: Diagram -->
|
|
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
|
|
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
|
|
<div style="display: flex; align-items: center; gap: 6px; margin-left: 10px;">
|
|
<div style="width: 55px; height: 26px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white;">from:jms</div>
|
|
<div style="width: 14px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 55px; height: 26px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; border: 2px solid #3D7C47;">log</div>
|
|
<div style="width: 14px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 55px; height: 26px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 7px; color: white; border: 2px solid #C0392B;">bean</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
|
|
</div>
|
|
<!-- Resizable splitter -->
|
|
<div style="width: 3px; background: #3a3530; border-radius: 2px; cursor: col-resize;"></div>
|
|
<!-- Right: Detail Panel -->
|
|
<div style="flex: 0 0 200px; background: #2a2520; border-radius: 4px; padding: 8px; overflow: hidden;">
|
|
<div style="font-size: 9px; color: #C6820E; font-weight: 600; margin-bottom: 6px;">log (processor-3)</div>
|
|
<div style="font-size: 8px; color: #3D7C47; margin-bottom: 8px;">COMPLETED - 12ms</div>
|
|
<div style="display: flex; flex-direction: column; gap: 2px; font-size: 8px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 4px; margin-bottom: 6px;">
|
|
<div style="display: flex; gap: 6px;">
|
|
<span style="color: #C6820E; font-weight: 600;">Input</span>
|
|
<span>Output</span>
|
|
<span>Headers</span>
|
|
</div>
|
|
</div>
|
|
<div style="font-family: monospace; font-size: 7px; color: #9C9184; line-height: 1.4;">
|
|
<div>{"orderId": "ORD-1234",</div>
|
|
<div> "product": "Widget A",</div>
|
|
<div> "quantity": 5,</div>
|
|
<div> "price": 29.99}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B: Left/Right Split</h3>
|
|
<p>Diagram on left, collapsible detail panel on right. Slide-in when node selected. Diagram keeps full height.</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>Pros</h4><ul><li>Full diagram height</li><li>Panel can collapse</li><li>Good for wide screens</li></ul></div>
|
|
<div class="cons"><h4>Cons</h4><ul><li>Steals diagram width</li><li>Tight on narrow screens</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option C: Hybrid -->
|
|
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="padding: 16px; background: #1a1612; border-radius: 6px;">
|
|
<div style="display: flex; flex-direction: column; gap: 8px; height: 280px;">
|
|
<!-- Top: Full width diagram -->
|
|
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 12px; position: relative; overflow: hidden;">
|
|
<div style="font-size: 10px; color: #9C9184; margin-bottom: 8px;">DIAGRAM</div>
|
|
<div style="display: flex; align-items: center; gap: 6px; margin-left: 20px;">
|
|
<div style="width: 60px; height: 28px; background: #1A7F8E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white;">from:jms</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #C6820E; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #3D7C47;">log</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #C0392B; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; border: 2px solid #C0392B;">bean</div>
|
|
<div style="width: 20px; height: 1px; background: #5C5347;"></div>
|
|
<div style="width: 60px; height: 28px; background: #3D7C47; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: white; opacity: 0.4;">to:http</div>
|
|
</div>
|
|
<div style="position: absolute; bottom: 6px; right: 6px; font-size: 8px; color: #5C5347; background: #2a2520; padding: 2px 6px; border: 1px solid #3a3530; border-radius: 3px;">100%</div>
|
|
</div>
|
|
<!-- Bottom: Two-column detail -->
|
|
<div style="height: 3px; background: #3a3530; border-radius: 2px;"></div>
|
|
<div style="flex: 0 0 100px; display: flex; gap: 8px;">
|
|
<!-- Left: Processor list / timeline -->
|
|
<div style="flex: 0 0 140px; background: #2a2520; border-radius: 4px; padding: 6px; overflow: hidden;">
|
|
<div style="font-size: 8px; color: #9C9184; margin-bottom: 4px; font-weight: 600;">Processors</div>
|
|
<div style="font-size: 7px; line-height: 1.8;">
|
|
<div style="color: #3D7C47; padding: 1px 4px; background: #2a2a20; border-radius: 2px;">from:jms - 2ms</div>
|
|
<div style="color: #C6820E; padding: 1px 4px; background: #3a3020; border-radius: 2px; border-left: 2px solid #C6820E;">log - 12ms</div>
|
|
<div style="color: #C0392B; padding: 1px 4px;">bean - FAILED</div>
|
|
<div style="color: #5C5347; padding: 1px 4px; opacity: 0.5;">to:http - skipped</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Selected processor detail -->
|
|
<div style="flex: 1; background: #2a2520; border-radius: 4px; padding: 6px; overflow: hidden;">
|
|
<div style="display: flex; gap: 8px; font-size: 8px; color: #9C9184; border-bottom: 1px solid #3a3530; padding-bottom: 3px; margin-bottom: 4px;">
|
|
<span style="color: #C6820E;">Input</span>
|
|
<span>Output</span>
|
|
<span>Headers</span>
|
|
</div>
|
|
<div style="font-family: monospace; font-size: 7px; color: #9C9184; line-height: 1.4;">
|
|
<div>{"orderId": "ORD-1234",</div>
|
|
<div> "product": "Widget A"}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C: Top/Bottom with Processor List</h3>
|
|
<p>Diagram on top, bottom split into processor list (left) + detail tabs (right). Clicking processor in list or diagram syncs selection. Most information density.</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>Pros</h4><ul><li>Processor list as navigation</li><li>Full diagram width</li><li>Maximum information density</li></ul></div>
|
|
<div class="cons"><h4>Cons</h4><ul><li>More complex layout</li><li>May feel crowded</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|