cameleer-server/.superpowers/brainstorm/14618-1774629192/execution-overlay-design.html

<h2>Execution Overlay: Full Design Mockup</h2>
<p class="subtitle">ExecutionDiagram component — diagram with execution overlay + detail panel</p>

<div class="mockup">
  <div class="mockup-header">ExecutionDiagram — Failed Exchange View</div>
  <div class="mockup-body" style="background: #FAFAF8; padding: 0;">
    <!-- Top bar: Exchange summary -->
    <div style="display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #E4DFD8; font-size: 12px; color: #5C5347;">
      <span style="font-weight: 600; color: #1A1612;">Exchange</span>
      <code style="font-size: 11px; background: #F5F0EA; padding: 2px 6px; border-radius: 3px; color: #1A1612;">abc-123-def-456</code>
      <span style="background: #C0392B; color: white; font-size: 10px; padding: 1px 8px; border-radius: 10px; font-weight: 600;">FAILED</span>
      <span style="color: #9C9184;">sample-app / content-based-routing</span>
      <span style="color: #9C9184;">247ms</span>
      <div style="margin-left: auto; display: flex; gap: 6px;">
        <button style="font-size: 10px; padding: 3px 10px; border: 1px solid #C0392B; background: #FDF2F0; color: #C0392B; border-radius: 4px; cursor: pointer; font-weight: 500;">Jump to Error</button>
      </div>
    </div>

    <!-- Main content: Diagram top, Detail bottom -->
    <div style="display: flex; flex-direction: column; height: 480px;">

      <!-- TOP: Process Diagram with Overlay -->
      <div style="flex: 1; position: relative; overflow: hidden; background: #fff; border-bottom: 2px solid #E4DFD8;">

        <!-- Breadcrumbs (if drilled down) -->

        <!-- Diagram content -->
        <div style="padding: 24px 30px;">
          <!-- Main flow -->
          <div style="display: flex; align-items: center; gap: 0;">

            <!-- Node: from:jms (COMPLETED) -->
            <div style="position: relative;">
              <div style="width: 140px; 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>
              <div style="position: absolute; bottom: 2px; right: 6px; font-size: 8px; color: #3D7C47; font-weight: 500;">2ms</div>
            </div>

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

            <!-- Node: log (COMPLETED) -->
            <div style="position: relative;">
              <div style="width: 140px; height: 52px; background: #fff; border: 1px solid #E4DFD8; 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>

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

            <!-- Node: CHOICE compound -->
            <div style="position: relative; border: 2px dashed #7C3AED; border-radius: 8px; padding: 0; background: #FAFAFF;">
              <!-- Compound header -->
              <div style="background: #7C3AED; color: white; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 5px 5px 0 0;">CHOICE</div>
              <div style="padding: 10px; display: flex; gap: 16px;">
                <!-- WHEN branch (taken, failed) -->
                <div style="border: 1px solid #E4DFD8; border-radius: 5px; padding: 6px; background: #fff;">
                  <div style="font-size: 8px; color: #7C3AED; font-weight: 600; margin-bottom: 4px;">WHEN: header.type == 'A'</div>
                  <div style="display: flex; align-items: center; gap: 0;">
                    <!-- Node: bean (FAILED) -->
                    <div style="position: relative;">
                      <div style="width: 120px; height: 48px; background: #FDF2F0; border: 2px solid #C0392B; border-radius: 6px; overflow: hidden;">
                        <div style="height: 5px; background: #C6820E;"></div>
                        <div style="padding: 3px 6px;">
                          <div style="font-size: 9px; font-weight: 600; color: #C0392B;">bean:validate</div>
                          <div style="font-size: 8px; color: #C0392B;">FAILED</div>
                        </div>
                      </div>
                      <div style="position: absolute; bottom: 1px; right: 4px; font-size: 7px; color: #C0392B; font-weight: 500;">120ms</div>
                      <!-- Error icon -->
                      <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="20" height="10" style="flex-shrink:0;"><line x1="0" y1="5" x2="20" y2="5" stroke="#9CA3AF" stroke-width="1"/></svg>

                    <!-- Node: to:http (NOT EXECUTED - dimmed) -->
                    <div style="position: relative; opacity: 0.35;">
                      <div style="width: 120px; height: 48px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
                        <div style="height: 5px; background: #3D7C47;"></div>
                        <div style="padding: 3px 6px;">
                          <div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:http:api</div>
                          <div style="font-size: 8px; color: #9C9184;">TO</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- OTHERWISE branch (not taken - dimmed) -->
                <div style="border: 1px solid #E4DFD8; border-radius: 5px; padding: 6px; background: #fff; opacity: 0.35;">
                  <div style="font-size: 8px; color: #7C3AED; font-weight: 600; margin-bottom: 4px;">OTHERWISE</div>
                  <div style="width: 120px; height: 48px; background: #fff; border: 1px solid #E4DFD8; border-radius: 6px; overflow: hidden;">
                    <div style="height: 5px; background: #3D7C47;"></div>
                    <div style="padding: 3px 6px;">
                      <div style="font-size: 9px; font-weight: 600; color: #1A1612;">to:direct:alt</div>
                      <div style="font-size: 8px; color: #9C9184;">DIRECT</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Zoom controls (bottom-right) -->
        <div style="position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 3px; background: #fff; border: 1px solid #E4DFD8; border-radius: 4px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);">
          <button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 12px; cursor: pointer; color: #1A1612;">+</button>
          <span style="font-size: 9px; color: #9C9184; min-width: 30px; text-align: center;">100%</span>
          <button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 12px; cursor: pointer; color: #1A1612;">-</button>
          <button style="width: 22px; height: 22px; border: none; background: transparent; font-size: 10px; cursor: pointer; color: #1A1612;">Fit</button>
        </div>

        <!-- Minimap (bottom-left) -->
        <div style="position: absolute; bottom: 8px; left: 8px; width: 100px; height: 60px; background: #fff; border: 1px solid #E4DFD8; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden;">
          <div style="padding: 4px;">
            <div style="display: flex; gap: 2px; align-items: center; transform: scale(0.3); transform-origin: top left;">
              <div style="width: 60px; height: 20px; background: #1A7F8E; border-radius: 2px;"></div>
              <div style="width: 60px; height: 20px; background: #C6820E; border-radius: 2px;"></div>
              <div style="width: 100px; height: 40px; border: 1px solid #7C3AED; border-radius: 2px;"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- SPLITTER -->
      <div style="height: 4px; background: #E4DFD8; cursor: row-resize; flex-shrink: 0;"></div>

      <!-- BOTTOM: Detail Panel -->
      <div style="flex: 0 0 180px; background: #fff; display: flex; flex-direction: column;">
        <!-- Selected processor header -->
        <div style="display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #E4DFD8; background: #FAFAF8;">
          <span style="font-size: 11px; font-weight: 600; color: #C0392B;">bean:validate</span>
          <span style="font-size: 10px; color: #C0392B; background: #FDF2F0; padding: 1px 6px; border-radius: 8px;">FAILED</span>
          <span style="font-size: 10px; color: #9C9184;">processor-5 &middot; 120ms</span>
        </div>

        <!-- Tabs -->
        <div style="display: flex; gap: 0; border-bottom: 1px solid #E4DFD8; background: #FAFAF8; padding: 0 14px;">
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Info</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Headers</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Input</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Output</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #C0392B; border-bottom: 2px solid #C0392B; font-weight: 600; cursor: pointer;">Error</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer; opacity: 0.5;">Config</div>
          <div style="font-size: 11px; padding: 6px 12px; color: #9C9184; cursor: pointer;">Timeline</div>
        </div>

        <!-- Tab content: Error -->
        <div style="flex: 1; padding: 10px 14px; overflow-y: auto;">
          <div style="margin-bottom: 8px;">
            <div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Exception</div>
            <div style="font-size: 12px; color: #C0392B; font-weight: 500;">javax.validation.ValidationException</div>
          </div>
          <div style="margin-bottom: 8px;">
            <div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Message</div>
            <div style="font-size: 12px; color: #1A1612;">Order quantity must be positive: received -3</div>
          </div>
          <div style="margin-bottom: 8px;">
            <div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Root Cause</div>
            <div style="font-size: 12px; color: #C0392B;">java.lang.IllegalArgumentException: quantity must be > 0</div>
          </div>
          <div>
            <div style="font-size: 10px; color: #9C9184; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Stack Trace</div>
            <pre style="font-size: 10px; color: #5C5347; background: #F5F0EA; padding: 8px; border-radius: 4px; overflow-x: auto; margin: 0; line-height: 1.6;">at com.example.OrderValidator.validate(OrderValidator.java:42)
at com.example.OrderRoute.process(OrderRoute.java:18)
at org.apache.camel.processor.DelegateSyncProcessor.process(...)
at org.apache.camel.processor.Pipeline.process(Pipeline.java:184)
... 8 more</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="margin-top: 24px;">
  <h3>Design Decisions Shown</h3>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; color: #5C5347;">
    <div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #3D7C47;">
      <strong style="color: #1A1612;">Executed (OK)</strong><br/>
      Green left border, duration badge bottom-right
    </div>
    <div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #C0392B;">
      <strong style="color: #1A1612;">Failed</strong><br/>
      Red border, red tint background, red ! badge top-right
    </div>
    <div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #9C9184;">
      <strong style="color: #1A1612;">Not Executed</strong><br/>
      Dimmed to 35% opacity — full topology visible
    </div>
    <div style="background: #f8f8f6; padding: 10px; border-radius: 6px; border-left: 3px solid #C6820E;">
      <strong style="color: #1A1612;">Selected</strong><br/>
      Amber ring (existing), detail panel updates below
    </div>
  </div>
</div>